Border radius

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

0.25rem (4px)

Used for small elements like checkbox, tag, tooltip

rounded

--ts-border-radius-x-small

0.375rem (6px)

Used for small inputs only

rounded-md

--ts-border-radius-small

0.5rem (8px)

Used for larger elements like cards, inputs, selects

rounded-lg

--sl-border-radius-large

1rem (16px)

Used for dialog (modal) only

rounded-2xl

--sl-border-radius-x-large

9999px

Used for pill shaped elements like the button

rounded-full

--sl-border-radius-pill