Corner radius

One ramp of rounding, from a subtle softening to a fully pill shape. Switch platform in the bar below for the matching identifier and units.

Corner radius

Use border-radius steps to keep corners consistent across components. Choose a value from the radius scale based on the element’s size and emphasis.

radius2xs
4pt
→ scale.positive.100
radiusXs
6pt
→ scale.positive.150
radiusSm
8pt
→ scale.positive.200
radiusMd
12pt
→ scale.positive.300
radiusLg
16pt
→ scale.positive.400
radiusXl
24pt
→ scale.positive.600
radiusPill
9999pt
→ scale.positive.9999

A component’s footprint sets its radius— the larger the surface, the larger the corner. Pick a step from the scale by the element’s size and how much it should stand out; never hardcode an off-scale value.

Used for

TokenValueUsed for
radius2xs4pt—
radiusXs6ptTags, chips, badges, and small inline controls.
radiusSm8ptButtons, inputs, and other small interactive elements.
radiusMd12ptCards and list rows — the default container radius.
radiusLg16ptSheets, larger cards, and grouped sections.
radiusXl24ptModals and large hero surfaces.
radiusPill9999ptPills, avatars, and fully-rounded controls.

Applied

The same scale on real surfaces — small controls get a tight radius, big containers a softer one.

Continue
radiusSm
radiusMd
radiusLg

Nested corners

When one rounded element sits inside another, the inner radius must be smaller than the outer — aim for inner ≈ outer − padding so the corners stay concentric.

Card radiusLg · thumbnail radiusSm

Do & Don’t

✓ DoKeep the inner element’s radius tighter than its container.
✗ Don’tReuse the container’s radius on a nested element — the corners stop being concentric.