Divide color

Utilities for controlling the border color between elements


Class reference

ClassProperties
divide-current> * + *border-color: currentColor;
divide-transparent> * + *border-color: transparent;
divide-black> * + *border-color: #000;
divide-white> * + *border-color: #FFF;
divide-gray-0> * + *border-color: #FDF8FF;
divide-gray-100> * + *border-color: #F8F6F9;
divide-gray-200> * + *border-color: #E9E7EA;
divide-gray-300> * + *border-color: #CFCBCE;
divide-gray-400> * + *border-color: #A8A3A7;
divide-gray-500> * + *border-color: #7B7479;
divide-gray-600> * + *border-color: #514B4F;
divide-gray-700> * + *border-color: #342E32;
divide-gray-800> * + *border-color: #231E21;
divide-gray-900> * + *border-color: #1A1217;
divide-gray> * + *border-color: #E9E7EA;
divide-violet-0> * + *border-color: #F6F3FF;
divide-violet-100> * + *border-color: #EFE4FF;
divide-violet-200> * + *border-color: #DCC4FF;
divide-violet-300> * + *border-color: #BD90FF;
divide-violet-400> * + *border-color: #944EFA;
divide-violet-500> * + *border-color: #680CE9;
divide-violet-600> * + *border-color: #5900BE;
divide-violet-700> * + *border-color: #49008F;
divide-violet-800> * + *border-color: #350061;
divide-violet-900> * + *border-color: #1E0033;
divide-violet> * + *border-color: #680CE9;
divide-magenta-0> * + *border-color: #FBF3FF;
divide-magenta-100> * + *border-color: #F7DDFF;
divide-magenta-200> * + *border-color: #EFB8FD;
divide-magenta-300> * + *border-color: #E583F7;
divide-magenta-400> * + *border-color: #D543ED;
divide-magenta-500> * + *border-color: #BF04DC;
divide-magenta-600> * + *border-color: #B400BA;
divide-magenta-700> * + *border-color: #92008A;
divide-magenta-800> * + *border-color: #630056;
divide-magenta-900> * + *border-color: #330029;
divide-magenta> * + *border-color: #BF04DC;
divide-blue-0> * + *border-color: #F4FDFF;
divide-blue-100> * + *border-color: #C2EBFD;
divide-blue-200> * + *border-color: #90C9F7;
divide-blue-300> * + *border-color: #64A0EB;
divide-blue-400> * + *border-color: #4177D8;
divide-blue-500> * + *border-color: #2753BF;
divide-blue-600> * + *border-color: #1637A1;
divide-blue-700> * + *border-color: #0B2381;
divide-blue-800> * + *border-color: #051560;
divide-blue-900> * + *border-color: #020D40;
divide-blue> * + *border-color: #64A0EB;
divide-teal-0> * + *border-color: #F4FFFC;
divide-teal-100> * + *border-color: #BEF8EC;
divide-teal-200> * + *border-color: #87E8DC;
divide-teal-300> * + *border-color: #57CDC8;
divide-teal-400> * + *border-color: #32A4A8;
divide-teal-500> * + *border-color: #1A777F;
divide-teal-600> * + *border-color: #0C515A;
divide-teal-700> * + *border-color: #05363E;
divide-teal-800> * + *border-color: #02272D;
divide-teal-900> * + *border-color: #012026;
divide-teal> * + *border-color: #57CDC8;
divide-green-0> * + *border-color: #F6FFF4;
divide-green-100> * + *border-color: #C0F8BE;
divide-green-200> * + *border-color: #87E891;
divide-green-300> * + *border-color: #57CD71;
divide-green-400> * + *border-color: #32A857;
divide-green-500> * + *border-color: #1A7F40;
divide-green-600> * + *border-color: #0C5A2D;
divide-green-700> * + *border-color: #053E20;
divide-green-800> * + *border-color: #022D17;
divide-green-900> * + *border-color: #012614;
divide-green> * + *border-color: #57CD71;
divide-yellow-0> * + *border-color: #FFFCF4;
divide-yellow-100> * + *border-color: #F9F0BF;
divide-yellow-200> * + *border-color: #EAE388;
divide-yellow-300> * + *border-color: #CECF58;
divide-yellow-400> * + *border-color: #A2A933;
divide-yellow-500> * + *border-color: #727D19;
divide-yellow-600> * + *border-color: #4A550B;
divide-yellow-700> * + *border-color: #303805;
divide-yellow-800> * + *border-color: #212702;
divide-yellow-900> * + *border-color: #1B2101;
divide-yellow> * + *border-color: #CECF58;
divide-orange-0> * + *border-color: #FFF7F4;
divide-orange-100> * + *border-color: #FDD0BC;
divide-orange-200> * + *border-color: #F6AB85;
divide-orange-300> * + *border-color: #E98C55;
divide-orange-400> * + *border-color: #D6722F;
divide-orange-500> * + *border-color: #BB5B16;
divide-orange-600> * + *border-color: #9B4606;
divide-orange-700> * + *border-color: #793500;
divide-orange-800> * + *border-color: #552600;
divide-orange-900> * + *border-color: #331700;
divide-orange> * + *border-color: #E98C55;
divide-red-0> * + *border-color: #FFF4F4;
divide-red-100> * + *border-color: #FDC2C4;
divide-red-200> * + *border-color: #F79092;
divide-red-300> * + *border-color: #EB6467;
divide-red-400> * + *border-color: #D84144;
divide-red-500> * + *border-color: #BF272A;
divide-red-600> * + *border-color: #A11618;
divide-red-700> * + *border-color: #810B0D;
divide-red-800> * + *border-color: #600507;
divide-red-900> * + *border-color: #400203;
divide-red> * + *border-color: #EB6467;
divide-pink-0> * + *border-color: #FFF4FF;
divide-pink-100> * + *border-color: #FDC2F5;
divide-pink-200> * + *border-color: #F790DB;
divide-pink-300> * + *border-color: #EB64B6;
divide-pink-400> * + *border-color: #D84190;
divide-pink-500> * + *border-color: #BF276C;
divide-pink-600> * + *border-color: #A1164E;
divide-pink-700> * + *border-color: #810B36;
divide-pink-800> * + *border-color: #600525;
divide-pink-900> * + *border-color: #400217;
divide-pink> * + *border-color: #EB64B6;
divide-light> * + *border-color: #FDF8FF;
divide-dark> * + *border-color: #342E32;
divide-primary> * + *border-color: #680CE9;
divide-primary-light> * + *border-color: #944EFA;
divide-primary-dark> * + *border-color: #5900BE;
divide-secondary> * + *border-color: #1E0033;
divide-secondary-light> * + *border-color: #49008F;
divide-secondary-dark> * + *border-color: #350061;
divide-info> * + *border-color: #64A0EB;
divide-info-light> * + *border-color: #90C9F7;
divide-info-dark> * + *border-color: #4177D8;
divide-success> * + *border-color: #57CD71;
divide-success-light> * + *border-color: #87E891;
divide-success-dark> * + *border-color: #32A857;
divide-warning> * + *border-color: #CECF58;
divide-warning-light> * + *border-color: #EAE388;
divide-warning-dark> * + *border-color: #A2A933;
divide-danger> * + *border-color: #EB6467;
divide-danger-light> * + *border-color: #F79092;
divide-danger-dark> * + *border-color: #D84144;
divide-brand-primary> * + *border-color: #680CE9;
divide-brand-accent> * + *border-color: #BF04DC;
divide-brand-secondary> * + *border-color: #1E0033;
divide-brand-dark> * + *border-color: #250D2E;

# Usage

Control the border color between elements using the divide-{color} utilities.

1
2
3
<div class="divide-y divide-red">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

# Changing opacity

Control the opacity of borders between elements using the .divide-opacity-{amount} utilities.

1
2
3
<div class="divide-y-4 divide-dark divide-opacity-25">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Learn more in the divide opacity documentation.


# 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-x-8 to an element would apply the divide-x-8 utility at medium screen sizes and above.

<div class="divide-y divide-teal-400 md:divide-pink-400">
<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.