Border
Defines the limits of a container and helps organize content.
Token
Value
Preview
--sl-border-base
1px solid var(--sl-color-gray-3)
--sl-border-base-disabled
1px solid var(--sl-color-gray-6)
--sl-border-base-strong
1px solid var(--sl-color-gray-5)
--sl-border-base-strong-hover
1px solid var(--sl-color-gray-6)
--sl-border-success
1px solid var(--sl-color-green-3)
--sl-border-informational
1px solid var(--sl-color-blue-3)
--sl-border-warning
1px solid var(--sl-color-yellow-3)
--sl-border-accent
1px solid var(--sl-color-blue-3)
--sl-border-accent-strong
1px solid var(--sl-color-blue-10)
--sl-border-accent-strong-hover
1px solid var(--sl-color-blue-11)
--sl-border-critical
1px solid var(--sl-color-red-3)
--sl-border-critical-strong
1px solid var(--sl-color-red-8)
--sl-border-critical-strong-hover
1px solid var(--sl-color-red-9)
Want to know more about design tokens? Read the documentation.