Border Radius Generator

The border-radius property does not cut a corner off; it replaces the corner with a quarter of an ellipse. Each corner carries a horizontal and a vertical radius, and the single-value form simply sets them equal, producing a circular arc. The shorthand accepts one to four values that resolve much like margin: one value applies to all corners, two split the diagonal pairs of top-left with bottom-right and top-right with bottom-left, three give top-left, then both remaining diagonals, then bottom-right, and four run clockwise from top-left. A slash separates horizontal from vertical radii, so 30% 70% / 50% 20% describes elliptical corners. Percentages resolve against the box width for horizontal radii and its height for vertical ones, which is why 50% turns a rectangle into an ellipse rather than a circle. The specification defines a scaling rule for overflow: when the radii along any edge sum to more than that edge's length, the browser finds the smallest such ratio and multiplies every radius by it. That behaviour is why an arbitrary 9999px reliably produces a pill at any size, and why 50% cannot be exceeded in practice. Two caveats are worth keeping in mind. The curve applies to the border box, so padding and border widths shift where the visible arc falls relative to content. And child content is not clipped to the curve unless overflow is set to hidden or clip, which is the usual cause of square corners poking out of a rounded card.

Rounded corners were an expensive effect before CSS could draw them. Through the late 1990s and early 2000s designers assembled them from sliced background images, nested tables, or the various JavaScript corner scripts circulating at the time, each approach demanding extra markup and locking the corner to a fixed background colour. Mozilla shipped a proprietary -moz-border-radius in its Gecko engine in the early 2000s, and Apple followed with -webkit-border-radius in the Safari 3 generation, so the property saw years of real-world use under vendor prefixes before it was standardised. The W3C CSS Working Group folded the feature into the CSS Backgrounds and Borders Level 3 module, which specified the corner-shaping model, the slash syntax for elliptical radii, and the overflow scaling rule. Unprefixed support arrived across the major engines around 2010 and 2011, with Internet Explorer 9 the last significant holdout, after which the prefixed forms became unnecessary. Later design systems turned the property into a token scale rather than a per-element decision: Material Design assigns shape values by component role, and utility frameworks such as Tailwind expose a fixed ladder running from 2px up through 24px plus a full setting of 9999px, which depends directly on the specification's clamping behaviour.