Free CSS Border Radius Generator
Generate CSS border-radius rules visually with live preview. Control each corner independently with pixel or percentage values.
Free, no signup — adjust the sliders for each corner, optionally enable asymmetric H/V control, then click Generate to copy the CSS.
Editing is a pain in the ass, right?
That's why we're building Cubix. No more editing hell.
AI Video Editor
Drop your footage, tell it what you want. Cubix cuts, captions, color grades, and exports — fully on its own. No timeline. No manual work. Just results.
Cinematic Screen Recorder
Hit record on Windows. Auto-zoom, cinematic backgrounds, and studio-quality audio kick in automatically — your screen recording looks edited before you've touched a thing.
How to Generate Rounded Corners
Shape buttons, cards, and blobs and grab the CSS in three steps.
Set Each Corner
Drag the sliders for top-left, top-right, bottom-right, and bottom-left in px or %.
Go Asymmetric (Optional)
Enable separate horizontal and vertical radii for elliptical corners using the full syntax.
Copy the CSS
Grab the shorthand or longhand border-radius rule from the live preview in one click.
border-radius: 40px 12px 40px 12px;
Per-Corner Control
Set a different radius for each of the four corners independently — top-left, top-right, bottom-right, and bottom-left.
Asymmetric H/V
Enable separate horizontal and vertical radii per corner for elliptical shapes using the full border-radius syntax.
Shorthand & Longhand
Get the compact shorthand CSS or toggle longhand properties for each corner for maximum browser compatibility.
Frequently Asked Questions
What is CSS border-radius?
The border-radius CSS property rounds the corners of an element's border. You can specify one value for all corners or different values for each corner using the shorthand syntax.
When should I use % instead of px?
Use percentage values for responsive designs where the element size varies. Setting 50% on a square element creates a circle. Pixel values give precise control for fixed-size elements.
What are asymmetric border radii?
CSS allows separate horizontal and vertical radii for each corner using the / syntax, e.g. border-radius: 10px 20px / 5px 15px. This creates elliptical curves instead of circular ones.
How do I make a circle or pill shape?
Set border-radius to 50% on a square element for a circle, or a large pixel value (like 9999px) on a wider element for a pill/capsule button. The live preview confirms the shape instantly.
Is the CSS Border Radius Generator free?
Yes. It is completely free with no signup — adjust each corner, preview the shape, and copy the border-radius CSS.
Related CSS & design tools
Generate box shadows, build flex layouts, create gradients, and convert colors.