Divide Width

Utilities for controlling the divider width between an element's child items.

Default Width

Use d-divide-{y|x} to create a 1px divider between an element's child items.

<dt-stack class="d-divide-y d-divide-default d-w100p">
  <dt-stack direction="row" align="center" justify="center" class="d-p16">1</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-p16">2</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-p16">3</dt-stack>
</dt-stack>

<dt-stack direction="row" class="d-divide-x d-divide-default d-w100p">
  <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p16">1</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p16">2</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p16">3</dt-stack>
</dt-stack>

Changing the Divider Width

Use d-divide-{y|x}{n} to change the divider width between an element's child items.

<dt-stack direction="row" class="d-divide-x d-divide-x0 d-divide-default d-w100p d-ba d-bc-default">
  ...
</dt-stack>
<dt-stack direction="row" class="d-divide-x d-divide-x2 d-divide-default d-w100p d-ba d-bc-default d-baw2">
  ...
</dt-stack>
<dt-stack direction="row" class="d-divide-x d-divide-x4 d-divide-default d-w100p d-ba d-bc-default d-baw4">
  ...
</dt-stack>

Reversing the Divider Direction

If an element's flex-direction is reversed, apply d-divide-{y|x}-reverse to reverse the divider placement between an element's child items.

<dt-stack direction="row-reverse" class="d-divide-x d-divide-default d-divide-x-reverse d-w100p d-ba d-bc-default">
  <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p16">1</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p16">2</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p16">3</dt-stack>
</dt-stack>

Classes

Class
Output
d-divide-y > *+* --divide-y-reverse: 0;
border-top: calc( 1 px *(1 - var(--divide-y-reverse)) ) solid !important;
border-bottom: calc( 1 * var(--divide-y-reverse) ) solid !important;
d-divide-y0 > *+* --divide-y-reverse: 0;
border-top: calc( 0 px *(1 - var(--divide-y-reverse)) ) solid !important;
border-bottom: calc( 0 * var(--divide-y-reverse) ) solid !important;
d-divide-y2 > *+* --divide-y-reverse: 0;
border-top: calc( 2 px *(1 - var(--divide-y-reverse)) ) solid !important;
border-bottom: calc( 2 * var(--divide-y-reverse) ) solid !important;
d-divide-y4 > *+* --divide-y-reverse: 0;
border-top: calc( 4 px *(1 - var(--divide-y-reverse)) ) solid !important;
border-bottom: calc( 4 * var(--divide-y-reverse) ) solid !important;
d-divide-x > *+* --divide-x-reverse: 0;
border-right: calc( 1 px*var(--divide-x-reverse) ) solid !important;
border-left: calc( 1 *(1 - var(--divide-x-reverse)) ) solid !important;
d-divide-x0 > *+* --divide-x-reverse: 0;
border-right: calc( 0 px*var(--divide-x-reverse) ) solid !important;
border-left: calc( 0 *(1 - var(--divide-x-reverse)) ) solid !important;
d-divide-x2 > *+* --divide-x-reverse: 0;
border-right: calc( 2 px*var(--divide-x-reverse) ) solid !important;
border-left: calc( 2 *(1 - var(--divide-x-reverse)) ) solid !important;
d-divide-x4 > *+* --divide-x-reverse: 0;
border-right: calc( 4 px*var(--divide-x-reverse) ) solid !important;
border-left: calc( 4 *(1 - var(--divide-x-reverse)) ) solid !important;
Divide Width documentation last updated Thursday, June 11, 2026