Foundations · Border radius7 tokens · 2 px → 99 px
Corners that feel right.
Seven tokens — from tiny chips to fully rounded avatars.
PrinciplesHow to use radius
Match radius to surface size.
Smaller chips take smaller radii; larger surfaces take larger radii. Avoid mixing radii on nested shapes — use one step for children, one step up for parents.
Do this
Use the token, not the pixel
Reference var(--border-radius-medium) in every corner — the scale stays swappable.
Don't
Invent in-between values
No 5 px, 7 px, or 10 px radii. The scale is 2 / 4 / 6 / 8 / 12 / 24 — and 99 for circular.
Scale7 tokens · click to copy
The radius scale.
In componentsWhere each radius lands
Applied.
NEW
Tag · $number-br-xxs (2 px)
Active
Chip · $number-br-s (6 px)
Button · $number-br-m (8 px)
Card title
Supporting body copy.Card · $number-br-l (12 px)
Modal heading
Large surface · soft corner.Modal · $number-br-vl (24 px)
PT
Prithvi T.Avatar · $number-br-circular (99 px)