CSS Border Radius Generator
Set each corner separately or link all four, in px or percent, with automatic CSS shorthand and a live preview.
How to Use
- Choose unit and linkage
Pick px or percent first. For a uniform radius keep 'Linked' — editing any field drives the other three.
- Refine corners individually
Switch to 'Independent' to edit each one, which covers cases like cards with only the top corners rounded or chat bubbles with three.
- Copy the CSS
The code box already holds the compressed shorthand; copy it over the border-radius in your stylesheet.
FAQ
Why are there fewer values in the code than I entered?
Because CSS allows shorthand. With all four corners at 12px, border-radius: 12px is identical in effect, so the tool compresses to the shortest equivalent form rather than losing values.
Why is 999px a pill?
The browser clamps any radius larger than half the element size, so 999px renders the same as exactly half. A big number saves you from computing dimensions.
Percentages of what?
Horizontally of the element's width, vertically of its height. So 50% on a 200×100 box gives an elliptical corner, not a quarter circle.
What order do four different corners use?
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left — the same rotation as padding and margin.