Radius and borders
Corner radius and border width tokens.
To see how each data-shape value changes these tokens on real components, open the Playground.
Radius
| Utility | Value | Preview |
|---|---|---|
rounded-radius-radius-0 | 0px | |
rounded-radius-radius-2 | 2px | |
rounded-radius-radius-4 | 4px | |
rounded-radius-radius-6 | 6px | |
rounded-radius-radius-8 | 8px | |
rounded-radius-radius-10 | 10px | |
rounded-radius-radius-12 | 12px | |
rounded-radius-radius-16 | 16px | |
rounded-radius-radius-28 | 28px | |
rounded-radius-radius-32 | 32px | |
rounded-radius-radius-9999 | 9999px |
Border width
| Utility | Value | Preview |
|---|---|---|
border-border-0 | 0px | |
border-border-0-5 | 0.5px | |
border-border-1 | 1px | |
border-border-2 | 2px | |
border-border-4 | 4px |