Borders

Dissect Color

Utilities for sets bottom border color on each child elements of its parent.

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
dissect-transparent	border-color: transparent	Text Text
dissect-current	border-color: currentColor	Text Text

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

Usage

Set dissect-x-{value} and dissect-y-{value} borders with colors.

<div class="dissect-y-4 dissect-tint-lava-1">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .dissect-y-4,
    .dissect-tint-lava-1;
}

SCSS