Radius
Pre-defined border-radius tokens derived from the spacing primitives. Use CSS variables directly — never hardcode pixel values.
Scale
radius-none
0px
radius-xxs
2px
radius-xs
4px
radius-sm
6px
radius-md
8px
radius-lg
10px
radius-xl
12px
radius-2xl
16px
radius-3xl
20px
radius-4xl
24px
radius-full
9999px
| Token | Size (rem) | Pixels | Preview |
|---|---|---|---|
| --radius-none | 0rem | 0px | |
| --radius-xxs | 0.125rem | 2px | |
| --radius-xs | 0.25rem | 4px | |
| --radius-sm | 0.375rem | 6px | |
| --radius-md | 0.5rem | 8px | |
| --radius-lg | 0.625rem | 10px | |
| --radius-xl | 0.75rem | 12px | |
| --radius-2xl | 1rem | 16px | |
| --radius-3xl | 1.25rem | 20px | |
| --radius-4xl | 1.5rem | 24px | |
| --radius-full | ∞ | 9999px |
Usage conventions
- --radius-xs (4px)Checkboxes, small badges, tags
- --radius-sm (6px)Small buttons, tooltips, code blocks
- --radius-md (8px)Inputs, selects, standard buttons
- --radius-lg (10px)Medium cards, dropdowns
- --radius-xl (12px)Accordions, modals, larger cards
- --radius-full (9999px)Pill buttons, avatars, circular elements