Borders

Dissect v1.0.8

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

Class

class	css
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)))
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))
dissect-x-reverse	--dissect-x-reverse: 1
dissect-y-reverse	--dissect-y-reverse: 1

Note: Utility customizing is unavailable.

Usage

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

123

<!-- Example -->
<y class="flex dissect-x-4">
  <y>1</y>
  <y>2</y>
  <y>3</y>
</y>

Set borders in between the elements vertically.

123

<!-- Example -->
<y class="dissect-y-4">
  <y>1</y>
  <y>2</y>
  <y>3</y>
</y>

Variant

Variant	Enabled	Responsive
Default	Yes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled