Divide width

Utilities for controlling the border width between elements


Class reference

ClassProperties
divide-x-0> * + *--tw-divide-x-reverse: 0; border-right-width: calc(0 * var(--tw-divide-x-reverse)); border-left-width: calc(0 * calc(1 - var(--tw-divide-x-reverse)));
divide-y-0> * + *--tw-divide-y-reverse: 0; border-top-width: calc(0 * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(0 * var(--tw-divide-y-reverse));
divide-x-1> * + *--tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-1> * + *--tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
divide-x-2> * + *--tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-2> * + *--tw-divide-y-reverse: 0; border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
divide-x-4> * + *--tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-4> * + *--tw-divide-y-reverse: 0; border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
divide-x-6> * + *--tw-divide-x-reverse: 0; border-right-width: calc(6px * var(--tw-divide-x-reverse)); border-left-width: calc(6px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-6> * + *--tw-divide-y-reverse: 0; border-top-width: calc(6px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(6px * var(--tw-divide-y-reverse));
divide-x-8> * + *--tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-8> * + *--tw-divide-y-reverse: 0; border-top-width: calc(8px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(8px * var(--tw-divide-y-reverse));
divide-x> * + *--tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
divide-y> * + *--tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
divide-y-reverse> * + *--tw-divide-y-reverse: 1;
divide-x-reverse> * + *--tw-divide-x-reverse: 1;

Add borders between horizontal children

Add borders between horizontal elements using the divide-x-{amount} utilities.

1
2
3
<div class="grid grid-cols-3 divide-x divide-green-400">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Add borders between stacked children

Add borders between stacked elements using the divide-y-{amount} utilities.

1
2
3
<div class="grid grid-cols-1 divide-y divide-orange-400">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Reversing children order

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the divide-x-reverse or divide-y-reverse utilities to ensure the border is added to the correct side of each element.

1
2
3
<div class="flex flex-col-reverse divide-y divide-y-reverse divide-pink-400">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Responsive

To control the borders between elements at a specific breakpoint, add a {screen}: prefix to any existing divide utility. For example, adding the class md:divide-y-8 to an element would apply the divide-y-8 utility at medium screen sizes and above.

<div class="divide-y divide-gray-400 **md:divide-y-8**">
<div class="py-2">1</div>
<div class="py-2">2</div>
<div class="py-2">3</div>
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.