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