Skip to main content
Light Dark System
Get ready for more awesome! Web Awesome, the next iteration of Shoelace, is on Kickstarter. Read Our Story

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