Shape
Border radius tokens for consistent component rounding, from sharp corners to full pills.Overview
The radius scale uses a semantic naming system: inner → element → container → page. Each level fits 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 | Example |
|---|---|---|
| --radius-none | 0px | |
| --radius-inner | 8px | |
| --radius-element | 12px | |
| --radius-container | 16px | |
| --radius-page | 32px | |
| --radius-chat | 28px | |
| --radius-full | 9999px |
Concentric Radius
When a rounded container has padding, inner elements need a smaller radius to appear concentric. 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 meant for page-level containers. |
| Don't | Hardcode radius values; they won't scale with theme radius multipliers. |