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 |
---|---|---|
--sl-border-radius-small |
0.1875rem (3px) | |
--sl-border-radius-medium |
0.25rem (4px) | |
--sl-border-radius-large |
0.5rem (8px) | |
--sl-border-radius-x-large |
1rem (16px) | |
--sl-border-radius-circle |
50% | |
--sl-border-radius-pill |
9999px |