Border color

Utilities for controlling the color of an element's borders


Class reference

ClassProperties
border-currentborder-color: currentColor;

border-transparentborder-color: transparent;

border-blackborder-color: #000;

border-whiteborder-color: #FFF;

border-gray-0border-color: #FDF8FF;

border-gray-100border-color: #F8F6F9;

border-gray-200border-color: #E9E7EA;

border-gray-300border-color: #CFCBCE;

border-gray-400border-color: #A8A3A7;

border-gray-500border-color: #7B7479;

border-gray-600border-color: #514B4F;

border-gray-700border-color: #342E32;

border-gray-800border-color: #231E21;

border-gray-900border-color: #1A1217;

border-grayborder-color: #E9E7EA;

border-violet-0border-color: #F6F3FF;

border-violet-100border-color: #EFE4FF;

border-violet-200border-color: #DCC4FF;

border-violet-300border-color: #BD90FF;

border-violet-400border-color: #944EFA;

border-violet-500border-color: #680CE9;

border-violet-600border-color: #5900BE;

border-violet-700border-color: #49008F;

border-violet-800border-color: #350061;

border-violet-900border-color: #1E0033;

border-violetborder-color: #680CE9;

border-magenta-0border-color: #FBF3FF;

border-magenta-100border-color: #F7DDFF;

border-magenta-200border-color: #EFB8FD;

border-magenta-300border-color: #E583F7;

border-magenta-400border-color: #D543ED;

border-magenta-500border-color: #BF04DC;

border-magenta-600border-color: #B400BA;

border-magenta-700border-color: #92008A;

border-magenta-800border-color: #630056;

border-magenta-900border-color: #330029;

border-magentaborder-color: #BF04DC;

border-blue-0border-color: #F4FDFF;

border-blue-100border-color: #C2EBFD;

border-blue-200border-color: #90C9F7;

border-blue-300border-color: #64A0EB;

border-blue-400border-color: #4177D8;

border-blue-500border-color: #2753BF;

border-blue-600border-color: #1637A1;

border-blue-700border-color: #0B2381;

border-blue-800border-color: #051560;

border-blue-900border-color: #020D40;

border-blueborder-color: #64A0EB;

border-teal-0border-color: #F4FFFC;

border-teal-100border-color: #BEF8EC;

border-teal-200border-color: #87E8DC;

border-teal-300border-color: #57CDC8;

border-teal-400border-color: #32A4A8;

border-teal-500border-color: #1A777F;

border-teal-600border-color: #0C515A;

border-teal-700border-color: #05363E;

border-teal-800border-color: #02272D;

border-teal-900border-color: #012026;

border-tealborder-color: #57CDC8;

border-green-0border-color: #F6FFF4;

border-green-100border-color: #C0F8BE;

border-green-200border-color: #87E891;

border-green-300border-color: #57CD71;

border-green-400border-color: #32A857;

border-green-500border-color: #1A7F40;

border-green-600border-color: #0C5A2D;

border-green-700border-color: #053E20;

border-green-800border-color: #022D17;

border-green-900border-color: #012614;

border-greenborder-color: #57CD71;

border-yellow-0border-color: #FFFCF4;

border-yellow-100border-color: #F9F0BF;

border-yellow-200border-color: #EAE388;

border-yellow-300border-color: #CECF58;

border-yellow-400border-color: #A2A933;

border-yellow-500border-color: #727D19;

border-yellow-600border-color: #4A550B;

border-yellow-700border-color: #303805;

border-yellow-800border-color: #212702;

border-yellow-900border-color: #1B2101;

border-yellowborder-color: #CECF58;

border-orange-0border-color: #FFF7F4;

border-orange-100border-color: #FDD0BC;

border-orange-200border-color: #F6AB85;

border-orange-300border-color: #E98C55;

border-orange-400border-color: #D6722F;

border-orange-500border-color: #BB5B16;

border-orange-600border-color: #9B4606;

border-orange-700border-color: #793500;

border-orange-800border-color: #552600;

border-orange-900border-color: #331700;

border-orangeborder-color: #E98C55;

border-red-0border-color: #FFF4F4;

border-red-100border-color: #FDC2C4;

border-red-200border-color: #F79092;

border-red-300border-color: #EB6467;

border-red-400border-color: #D84144;

border-red-500border-color: #BF272A;

border-red-600border-color: #A11618;

border-red-700border-color: #810B0D;

border-red-800border-color: #600507;

border-red-900border-color: #400203;

border-redborder-color: #EB6467;

border-pink-0border-color: #FFF4FF;

border-pink-100border-color: #FDC2F5;

border-pink-200border-color: #F790DB;

border-pink-300border-color: #EB64B6;

border-pink-400border-color: #D84190;

border-pink-500border-color: #BF276C;

border-pink-600border-color: #A1164E;

border-pink-700border-color: #810B36;

border-pink-800border-color: #600525;

border-pink-900border-color: #400217;

border-pinkborder-color: #EB64B6;

border-lightborder-color: #FDF8FF;

border-darkborder-color: #342E32;

border-primaryborder-color: #680CE9;

border-primary-lightborder-color: #944EFA;

border-primary-darkborder-color: #5900BE;

border-secondaryborder-color: #1E0033;

border-secondary-lightborder-color: #49008F;

border-secondary-darkborder-color: #350061;

border-infoborder-color: #64A0EB;

border-info-lightborder-color: #90C9F7;

border-info-darkborder-color: #4177D8;

border-successborder-color: #57CD71;

border-success-lightborder-color: #87E891;

border-success-darkborder-color: #32A857;

border-warningborder-color: #CECF58;

border-warning-lightborder-color: #EAE388;

border-warning-darkborder-color: #A2A933;

border-dangerborder-color: #EB6467;

border-danger-lightborder-color: #F79092;

border-danger-darkborder-color: #D84144;

border-brand-primaryborder-color: #680CE9;

border-brand-accentborder-color: #BF04DC;

border-brand-secondaryborder-color: #1E0033;

border-brand-darkborder-color: #250D2E;

# Usage

Control the border color of an element using the .border-{color} utilities.

<input class="border border-red ...">

# Changing opacity

Control the opacity of an element’s background color using the .border-opacity-{amount} utilities.

100%
75%
50%
25%
0%
<div class="border-4 border-blue border-opacity-100 ..."></div>
<div class="border-4 border-blue border-opacity-75 ..."></div>
<div class="border-4 border-blue border-opacity-50 ..."></div>
<div class="border-4 border-blue border-opacity-25 ..."></div>
<div class="border-4 border-blue border-opacity-0 ..."></div>

Learn more in the border opacity documentation.

# Responsive

To control the border color of an element at a specific breakpoint, add a {screen}: prefix to any existing border color utility. For example, use md:border-green-500 to apply the border-green-500 utility at only medium screen sizes and above.

<button class="border-blue-500 **md:border-green-500** ...">
Button
</button>

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

# Hover

To control the border color of an element on hover, add the hover: prefix to any existing border color utility. For example, use hover:border-blue-500 to apply the border-blue-500 utility on hover.

<button class="border-2 border-violet-500 hover:border-violet-800 ...">
Button
</button>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<button class="... md:border-blue-500 md:hover:border-blue-700 ...">Button</button>

# Focus

To control the border color of an element on focus, add the focus: prefix to any existing border color utility. For example, use focus:border-blue-500 to apply the border-blue-500 utility on focus.

<input class="border-gray-200 focus:border-blue-400 ...">

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<input class="... md:border-gray-200 md:focus:border-white ...">