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 mud-border width sets the thickness of those edges.
|
token name
|
value, rem
|
value, px
|
radius preview
|
|---|---|---|---|
--border-radius-0
|
0rem |
0px |
|
--border-radius-4
|
0.25rem |
4px |
|
--border-radius-6
|
0.375rem |
6px |
|
--border-radius-8
|
0.5rem |
8px |
|
--border-radius-12
|
0.75rem |
12px |
|
--border-radius-16
|
1rem |
16px |
|
--border-radius-24
|
1.5rem |
24px |
|
--border-radius-32
|
2rem |
32px |
|
--border-radius-full
|
62rem |
999px |
|
|
token name
|
value, rem
|
value, px
|
width preview
|
|---|---|---|---|
--border-width-0.5
|
0.03125rem |
0.5px |
|
--border-width-1
|
0.0625rem |
1px |
|
--border-width-1.5
|
0.09375rem |
1.5px |
|
--border-width-2
|
0.125rem |
2px |
|
--border-width-3
|
0.1875rem |
3px |
|