ShapeBorder radius tokens for consistent component rounding — from sharp corners to full pills.
OverviewThe radius scale uses a semantic naming system: inner → element → container → page. Each level is designed for a specific context. Themes can multiply the entire scale via a radius multiplier, with --radius-none and --radius-full as fixed anchors.
Radius Scale
| Token | Value |
|---|---|
| --radius-none | 0px |
| --radius-inner | 4px |
| --radius-element | 8px |
| --radius-container | 12px |
| --radius-page | 28px |
| --radius-full | 9999px |
Concentric RadiusWhen a rounded container has padding, inner elements need a smaller radius to appear concentric. XDS components like Card handle this automatically — the inner radius is computed as max(0, outerRadius - padding).
Concentric radius formula
css
Best Practices
| Guidance | Practices |
|---|---|
| Do | Use --radius-element for interactive controls (buttons, inputs, selectors). |
| Do | Use --radius-container for content containers (cards, panels, dialogs). |
| Do | Use --radius-full for pill shapes (badges, tags, avatar status dots). |
| Don't | Use --radius-page for small elements — it's designed for page-level containers. |
| Don't | Hardcode radius values — they won't scale with theme radius multipliers. |