Border tokens define the width and curvature of element edges. Border radius controls the roundness of corners for components like buttons, cards, and input fields, while border width sets the thickness of those edges.
| Token Name | Value, rem | Value, px | CSS Class | Radius Preview |
|---|---|---|---|---|
--border-radius-0
|
0rem | 0px | .radius-0 |
|
--border-radius-4 |
0.25rem | 4px | .radius-4 |
|
--border-radius-6
|
0.375rem | 6px | .radius-6 |
|
--border-radius-8
|
0.5rem | 8px | .radius-8 |
|
--border-radius-12
|
0.75rem | 12px | .radius-12 |
|
--border-radius-16
|
1rem | 16px | .radius-16 |
|
--border-radius-32
|
2rem | 32px | .radius-32 |
|
--border-radius-full
|
62rem | 999px | .radius-full |