Skip to main content
Light Dark System

Shoelace is now Web Awesome!

Web Awesome, like Shoelace before it, has an even larger library of free web components. Plus, it has themes, utilities, patterns, and more.

Switch from Shoelace for free today. Grab Web Awesome Pro and get even more at a 20% discount!

Okay, got it
FYI, Shoelace is no longer actively being developed

But it is still available for use and may receive updates as needed.

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