The inner radius is smaller than the outer radius by the size of the padding.
Corner radius
Four radius steps, each assigned to its own component: a badge, a button, a card, or a modal. You do not pick a radius from scratch each time.
Scale
Name the component first, then take its radius.
Full
20
12
6
Nesting
20 = 12 + 8
The outer radius equals the inner radius plus the padding. The inner corner stays smaller, and the gap stays even.
20
12
The padding between them is 8 px.
Card, block, tag
Tag
- Card: radius 20, padding 8.
- Block: radius 12, padding 6.
- Tag: radius 6.
Pill
Morph
A square moves through every step of the scale, so the difference is easy to see. Dots sit at the center of each corner.
In the product
Short text.
A pill on a field, or an inner radius larger than the outer one.