Border Radius Tokens
Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
| Token | Value | Example |
|---|---|---|
--sc-border-radius-small |
0.1875rem (3px) | |
--sc-border-radius-medium |
0.25rem (4px) | |
--sc-border-radius-large |
0.5rem (8px) | |
--sc-border-radius-x-large |
1rem (16px) | |
--sc-border-radius-circle |
50% | |
--sc-border-radius-pill |
9999px |