Radii, and the one that should be huge

Radii, and the one that should be huge

Three or four steps plus a full round is what most systems actually use. The full step is a very large number on purpose — and that is not the same as fifty per cent.

Rounding a parent clips its children

A rounded container with square content inside it does not look rounded: an image, a table header or a coloured block will paint straight over the curve and square the corner off. The parent's radius affects the parent's own background and border, not what sits on top of it.

The fix is overflow: hidden on the container, which clips everything inside to the rounded shape. It works, and it is worth knowing what else it does: it creates a new block formatting context, so margins stop collapsing through it, and it will clip anything intended to escape — a dropdown, a tooltip, a focus ring drawn outside the element. A menu that opens and is immediately cut off at the card edge is nearly always this. Where that becomes a problem, giving the child its own matching radius instead avoids the clipping entirely.

The scale is for containers, not for controls

Radius scales tend to be built by analogy with type and spacing scales, as one progression applied everywhere. It transfers less well than it looks, because radius does not communicate size — it communicates kind.

A fully rounded pill reads as a control regardless of how big it is, which is why tags, toggles and buttons use it at every scale. A modest radius reads as a surface: cards, panels, sheets. A sharp corner reads as structure — tables, dividers, code blocks. Those are three different jobs, and picking the value by the element's role gives a more coherent interface than picking it by the element's dimensions. The scale is there so that everything in the same role agrees, not so that radius rises with width.