CSS Border Radius Generator

Unlink the corners and set just border-top-left-radius and border-top-right-radius, leaving the bottom two at 0. The shorthand version is border-radius: 12px 12px 0 0; (the four values go clockwise from top-left). This is the standard pattern for cards sitting on a flat edge, browser-style tabs, and bottom sheets in mobile layouts.

Click the Circle preset. Behind the scenes it sets all 4 corners to 50% and uses % units. Important: 50% makes a circle only on a square element (width = height). On a rectangle, 50% makes an oval. The preview width/height controls let you test both.

px: absolute pixel measurement. border-radius: 12px is always 12 pixels regardless of element size. %: relative to the element’s width (for horizontal radius) and height (for vertical, in elliptical mode). border-radius: 50% on a 200×200 box gives 100px radius (= circle).

CSS border-radius can take two values per corner: horizontal and vertical radius. With same values, the corner is a quarter-circle. With different values, it’s a quarter-ellipse (stretched). CSS syntax: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4. Useful for asymmetric rounding like a teardrop or leaf shape.

Longhand uses 4 separate properties (border-top-left-radius, etc.). Useful when you only want to override one corner (CSS cascade order matters) or for very explicit code in design-system stylesheets. Shorthand is more concise; longhand is more granular.

Sets all corners to 999px – a value much larger than any reasonable element size. CSS clamps border-radius to half the smaller dimension, so the corners become fully rounded (semicircles). On a 200×60 button, this produces the classic pill shape with rounded short edges.

CSS clamps automatically. If you set border-radius: 100px on a 50×50 element, the effective radius becomes 25px (half the smaller side). No browser warnings; just the visual result you’d expect. This is why the Pill preset works regardless of element size.

Yes. img { border-radius: 50% } creates a circular avatar from any square image (combine with object-fit: cover for non-square sources). Border-radius applies to the visible area of all replaced elements including <video> and <iframe>.

Universal. border-radius shipped in all browsers by 2010. No vendor prefixes needed for current versions. Even IE 9+ supports it. The only way it fails is on text browsers like Lynx – which obviously don’t render rounded corners anyway.

No. The CSS is generated entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.