Borders

Border Color

Utilities for sets border color.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
border-transparent	border-color: transparent
border-current	border-color: currentColor
border-white	border-color: #fff

class
border-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
border-tone-`{palette}`-`{modifier}`
border-tint-`{palette}`-`{modifier}`

Usage

<div class="border-8 ... border-shade-amber-1">
  ...
</div>

HTML

.dummy {
  @extend
    .border-8,
    .border-shade-amber-1;
}

SCSS

Set auto dark theme enabled to an element with added (dark) prefix.

<div class="border-8 ... border-shade-lava-1 ... (dark)border-8 (dark)border-tint-granite-5">
  ...
</div>

HTML

.dummy {
  @extend
    .border-8,
    .border-shade-lava-1,
    .\(dark\)border-8,
    .\(dark\)border-tint-granite-5;
}

SCSS