CSS border-radius generator

How to use

1. Pick a preset such as circle, pill, leaf or drop, or adjust the values directly.
2. Turn off "Same value for all 4 corners" to set top left, top right, bottom right and bottom left separately.
3. Choose px, % or rem. Switching between px and rem converts the values at 16px = 1rem.
4. Turn on "Elliptical corners" to give each corner its own horizontal and vertical radius.
5. Check the shape on a light or dark background and on a square or wide box, then copy the CSS or the Tailwind CSS class.

Notes and limits

• Values range from 0 to 9999 px, 0 to 100% and 0 to 625 rem. Negative values become 0 and larger values are capped. Up to 4 decimal places.
• A % value depends on the element width and height, so the same value looks different on boxes of other sizes. Switching to or from % keeps the numbers as they are.
• Tailwind output is mainly the arbitrary value syntax rounded-[...], which works in Tailwind CSS v3.0 and later, including v4, but not in v2.
• Units cannot be mixed within one value (for example 10px 50%).
• Nothing you enter is saved. It is gone when you close the page.

How it works

The CSS is shortened following the shorthand rules: one value when all corners match, two when top left equals bottom right and top right equals bottom left, three when only top right and bottom left match, otherwise four.

Elliptical corners use the slash syntax, horizontal radii / vertical radii. The part after the slash is left out when every vertical value equals its horizontal one. Zero keeps its unit, as 0px.

Named Tailwind classes such as rounded-sm have different sizes in v3 and v4, so they are not used. The exceptions are rounded-none when every value is 0 and rounded-full when every value is 9999px.