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: #F8F8FA;

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

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

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

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

border-gray-500border-color: #77767F;

border-gray-600border-color: #55545D;

border-gray-700border-color: #35343C;

border-gray-800border-color: #222128;

border-gray-900border-color: #0F0D16;

border-grayborder-color: #E5E4E9;

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

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

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

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

border-violet-400border-color: #9553F8;

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

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

border-violet-700border-color: #440087;

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

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

border-violetborder-color: #680CE9;

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

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

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

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

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

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

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

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

border-magenta-800border-color: #7A0373;

border-magenta-900border-color: #34002B;

border-magentaborder-color: #BF04DC;

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

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

border-blue-200border-color: #A3D3FB;

border-blue-300border-color: #76AAEF;

border-blue-400border-color: #4B7AD9;

border-blue-500border-color: #2157CE;

border-blue-600border-color: #1F3EAA;

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

border-blue-800border-color: #01145E;

border-blue-900border-color: #00062F;

border-blueborder-color: #76AAEF;

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

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

border-teal-200border-color: #76E4D7;

border-teal-300border-color: #3CCBC5;

border-teal-400border-color: #2AA1A4;

border-teal-500border-color: #147F87;

border-teal-600border-color: #036873;

border-teal-700border-color: #03414F;

border-teal-800border-color: #012C34;

border-teal-900border-color: #00181E;

border-tealborder-color: #3CCBC5;

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

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

border-green-200border-color: #91EA99;

border-green-300border-color: #40D066;

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

border-green-500border-color: #148540;

border-green-600border-color: #016E3A;

border-green-700border-color: #064826;

border-green-800border-color: #012C17;

border-green-900border-color: #001A0D;

border-greenborder-color: #40D066;

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

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

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

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

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

border-yellow-500border-color: #7E7F1B;

border-yellow-600border-color: #636408;

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

border-yellow-800border-color: #2A2601;

border-yellow-900border-color: #191700;

border-yellowborder-color: #D4CD52;

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

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

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

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

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

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

border-orange-600border-color: #904808;

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

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

border-orange-900border-color: #2D1100;

border-orangeborder-color: #F2995B;

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

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

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

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

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

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

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

border-red-700border-color: #7B0A0C;

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

border-red-900border-color: #3A0102;

border-redborder-color: #FA7370;

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

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

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

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

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

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

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

border-pink-700border-color: #740830;

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

border-pink-900border-color: #3D0115;

border-pinkborder-color: #F373C0;

border-lightborder-color: #F8F8FA;

border-darkborder-color: #35343C;

border-primaryborder-color: #680CE9;

border-primary-lightborder-color: #9553F8;

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

border-secondaryborder-color: #1E0033;

border-secondary-lightborder-color: #440087;

border-secondary-darkborder-color: #340060;

border-infoborder-color: #76AAEF;

border-info-lightborder-color: #A3D3FB;

border-info-darkborder-color: #4B7AD9;

border-successborder-color: #40D066;

border-success-lightborder-color: #91EA99;

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

border-warningborder-color: #D4CD52;

border-warning-lightborder-color: #EDE78E;

border-warning-darkborder-color: #B0AA31;

border-dangerborder-color: #FA7370;

border-danger-lightborder-color: #FDB0B1;

border-danger-darkborder-color: #E04542;

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

border-brand-accentborder-color: #BF04DC;

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

border-brand-darkborder-color: #35343C;

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