Radii
The list of available border radius tokens
Tokens
Chakra UI supports the following border radius tokens out of the box.
theme.tokens.radii
none
0
2xs
0.0625rem
xs
0.125rem
sm
0.25rem
md
0.375rem
lg
0.5rem
xl
0.75rem
2xl
1rem
3xl
1.5rem
4xl
2rem
full
9999px
Here’s the conversion of the given rem values to px, assuming the root font size is 16px (which is the default in most browsers)
| Size | rem Value | px Equivalent |
|---|---|---|
| none | 0 | 0px |
| 2xs | 0.0625rem | 1px |
| xs | 0.125rem | 2px |
| sm | 0.25rem | 4px |
| md | 0.375rem | 6px |
| lg | 0.5rem | 8px |
| xl | 0.75rem | 12px |
| 2xl | 1rem | 16px |
| 3xl | 1.5rem | 24px |
| 4xl | 2rem | 32px |
| full | 9999px | 9999px |