Border
Defines the limits of a container and helps organize content.
Token
CSS Variable
Value
Preview
$border
--sl-border
1px solid var(--sl-color-gray-3)
$border-disabled
--sl-border-disabled
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-strong
--sl-border-strong
1px solid var(--sl-color-gray-5)
$border-strong-hover
--sl-border-strong-hover
1px solid var(--sl-color-gray-6)
$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)