Skip to main content
Light Dark System
Web Awesome is the new name for Shoelace! Come see the next iteration, now in beta. Show me what's new!

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