Elements logo

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 ...">