Corner radius

A rounded corner is a quarter of a circle laid into the angle where two edges meet, and the radius is that circle’s radius: the distance back along each edge at which the straight run stops and the arc begins. Zero leaves the angle as drawn. Small values read as a manufacturing tolerance rather than a decision, which is exactly the register a dense tool wants. Large ones read as soft, friendly, consumer. Past a point the number stops behaving like a corner at all: at half the shorter side the two arcs on that side meet, the straight run between them vanishes, and the shape is a pill. Anything larger lands on the same pill, because a browser that finds the stated radii overlapping scales every one of them down in proportion until they fit.

Radius belongs to a scale, not to a component. Systems publish a small ladder of steps and name them, so a card, a menu and a dialog agree by construction: Material 3 calls its ladder the shape scale and runs it from none through extra small, small, medium, large and extra large to full, and most other systems ship three to five steps under their own names. Picking a number per component is how an interface ends up with 6px cards beside 7px buttons and a 10px dialog, differences nobody chose and nobody can defend, which read as sloppiness long before anyone can say why.

On the web the property carries more than the one number. border-radius takes up to eight values, two per corner, separated by a slash: a horizontal radius and a vertical one, which makes the corner an ellipse rather than a circle. Almost nothing uses that deliberately, and the shapes that do are usually reaching for a blob. Percentages resolve against the box’s own dimensions, the horizontal radius against its width and the vertical against its height, so a percentage radius changes shape as the box resizes and 50% is always an ellipse inscribed in the box rather than a fixed curve. That is the difference between a pill written as a large pixel value, which stays a pill at any height, and one written as a percentage, which does not.

The neighbouring words name different things. A squircle is not a bigger radius but a different curve, one whose curvature ramps instead of switching on at a point, and a chamfer replaces the corner with a flat cut measured by its leg rather than by a radius. This term is one number on one shape; concentric corner radius is the arithmetic that relates two of those numbers when one rounded shape sits inside another.