Borders

Dissect

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


Variant

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

API

classcss
dissect-x-0--dissect-x-reverse: 0;
border-right-width: calc(0 * var(--dissect-x-reverse));
border-left-width: calc(0 * calc(1 - var(--dissect-x-reverse)))
dissect-x-2--dissect-x-reverse: 0;
border-right-width: calc(2px * var(--dissect-x-reverse));
border-left-width: calc(2px * calc(1 - var(--dissect-x-reverse)))
dissect-x-4--dissect-x-reverse: 0;
border-right-width: calc(4px * var(--dissect-x-reverse));
border-left-width: calc(4px * calc(1 - var(--dissect-x-reverse)))
dissect-x-8--dissect-x-reverse: 0;
border-right-width: calc(8px * var(--dissect-x-reverse));
border-left-width: calc(8px * calc(1 - var(--dissect-x-reverse)))
classcss
dissect-y-0--dissect-y-reverse: 0;
border-top-width: calc(0 * calc(1 - var(--dissect-y-reverse)));
border-bottom-width: calc(0 * var(--dissect-y-reverse))
dissect-y-2--dissect-y-reverse: 0;
border-top-width: calc(2px * calc(1 - var(--dissect-y-reverse)));
border-bottom-width: calc(2px * var(--dissect-y-reverse))
dissect-y-4--dissect-y-reverse: 0;
border-top-width: calc(4px * calc(1 - var(--dissect-y-reverse)));
border-bottom-width: calc(4px * var(--dissect-y-reverse))
dissect-y-8--dissect-y-reverse: 0;
border-top-width: calc(8px * calc(1 - var(--dissect-y-reverse)));
border-bottom-width: calc(8px * var(--dissect-y-reverse))
dissect-x--dissect-x-reverse: 0;
border-right-width: calc(1px * var(--divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--divide-x-reverse)))
dissect-y--dissect-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(1px * var(--divide-y-reverse))
classcss
dissect-x-reverse--dissect-x-reverse: 1
dissect-y-reverse--dissect-y-reverse: 1

Usage

Set borders in between the elements horizontally, must companion with flex utility.

1
2
3
<div class="flex dissect-x-4">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
HTML
.dummy {
@extend
.flex,
.dissect-x-4;
}
SCSS

Set borders in between the elements vertically.

1
2
3
<div class="dissect-y-4">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
HTML
.dummy {
@extend
.dissect-y-4;
}
SCSS