Borders

Dissect Color

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

Variant

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

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