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