CSS Border Radius Generator — Per-Corner Rounded Corners
Round each corner exactly how you want — pixels or percent — preview it, and copy the shortest CSS shorthand that produces it.
What this tool does
It rounds the corners of a box and writes the CSS. You can set one radius for all four corners, or
give each corner its own for an asymmetric shape, in pixels, percent or rem. The preview updates as
you type, and the output is the shortest correct border-radius — the browser expands it
back to four corners, so nothing is lost by collapsing the two- or three-value forms.
The shorthand forms
| Values | Meaning |
|---|---|
8px | All four corners 8px. |
8px 4px | Top-left & bottom-right 8px; top-right & bottom-left 4px. |
8px 4px 2px | Top-left 8px; top-right & bottom-left 4px; bottom-right 2px. |
8px 4px 2px 1px | Top-left, top-right, bottom-right, bottom-left — clockwise. |
Pixels or percent?
A pixel radius is a fixed corner: on a 40-pixel button, 8px reads the same whatever the button's size. A percentage radius is relative to the box, so 50% on a square is a perfect circle and the curvature scales with the element. Use pixels for consistent UI controls and a percentage when the shape itself should follow the size.
Where rounded corners help, and where they hurt
A small radius softens an interface and is the modern default for cards, buttons and inputs. Push it too far and a button loses its "clickable" read; a pill (fully rounded) suits a tag or a primary action but looks odd on a text field. Consistency matters more than any single value — pick a scale (for example 4, 8 and 16px) and reuse it, so the page reads as one system rather than a sampler.
Frequently asked questions
What is border-radius?
A CSS property that rounds the corners of a box. A single value rounds all four equally; up to four values set each corner in the order top-left, top-right, bottom-right, bottom-left. Rounded corners soften a UI, and a large enough radius on a square produces a circle.
Why does the tool sometimes output fewer values than I set?
CSS lets you write the same radius several ways, and the browser expands the shorthand by copying corners. When top-left equals bottom-right and top-right equals bottom-left, two values say the same thing as four — so the tool emits the shortest equivalent form. The rendered result is identical.
How do I make a circle or a pill?
For a perfect circle on a square element set all corners to 50%. For a pill (a rounded bar or button) set the radius to half the element's height, or use a large value such as 9999px, which the browser clamps to a pill shape automatically.
Can I round corners by a percentage instead of pixels?
Yes. A percentage is relative to the box's own size — the horizontal radius to the width, the vertical to the height — which is how you get an ellipse or a circle that scales with the element. Pixels give a corner that stays the same size whatever the box.
How do I make a squircle or "blob" shape?
A single radius makes a circular arc. For an organic squircle you set two radii per corner with a slash, for example border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. That is beyond this simple generator, but the same property takes it.
Is anything uploaded?
No. The value is produced in your browser; nothing is sent anywhere.
Go deeper
Longer explanations of the problems this tool solves:
Sources
- CSS Backgrounds and Borders Module Level 3 — the border-radius property (W3C).
Everything runs in your browser — nothing you type is uploaded.