Border radius

Border radius tokens and classes are used to give sharp edges a more subtle, rounded effect.

Example, value & usage
Tailwind class
Figma variable
Shoelace token
0.25rem (4px)
Used for small elements like checkbox, tag, tooltip
rounded
x-small
--ts-border-radius-x-small
0.375rem (6px)
Used for small inputs only
rounded-md
small
--ts-border-radius-small
0.5rem (8px)
Used for larger elements like cards, inputs, selects
rounded-lg
large
--sl-border-radius-large
1rem (16px)
Used for dialog (modal) only
rounded-2xl
x-large
--sl-border-radius-x-large
9999px
Used for pill shaped elements like the button
rounded-full
pill
--sl-border-radius-pill