Border Color

Utilities for controlling the color of an element's borders.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

Class reference

Class Properties
.border-transparent border-color: transparent;
.border-black border-color: #22292f;
.border-grey-darkest border-color: #3d4852;
.border-grey-darker border-color: #606f7b;
.border-grey-dark border-color: #8795a1;
.border-grey border-color: #b8c2cc;
.border-grey-light border-color: #dae1e7;
.border-grey-lighter border-color: #f1f5f8;
.border-grey-lightest border-color: #f8fafc;
.border-white border-color: #ffffff;
.border-red-darkest border-color: #3b0d0c;
.border-red-darker border-color: #621b18;
.border-red-dark border-color: #cc1f1a;
.border-red border-color: #e3342f;
.border-red-light border-color: #ef5753;
.border-red-lighter border-color: #f9acaa;
.border-red-lightest border-color: #fcebea;
.border-orange-darkest border-color: #462a16;
.border-orange-darker border-color: #613b1f;
.border-orange-dark border-color: #de751f;
.border-orange border-color: #f6993f;
.border-orange-light border-color: #faad63;
.border-orange-lighter border-color: #fcd9b6;
.border-orange-lightest border-color: #fff5eb;
.border-yellow-darkest border-color: #453411;
.border-yellow-darker border-color: #684f1d;
.border-yellow-dark border-color: #f2d024;
.border-yellow border-color: #ffed4a;
.border-yellow-light border-color: #fff382;
.border-yellow-lighter border-color: #fff9c2;
.border-yellow-lightest border-color: #fcfbeb;
.border-green-darkest border-color: #0f2f21;
.border-green-darker border-color: #1a4731;
.border-green-dark border-color: #1f9d55;
.border-green border-color: #38c172;
.border-green-light border-color: #51d88a;
.border-green-lighter border-color: #a2f5bf;
.border-green-lightest border-color: #e3fcec;
.border-teal-darkest border-color: #0d3331;
.border-teal-darker border-color: #20504f;
.border-teal-dark border-color: #38a89d;
.border-teal border-color: #4dc0b5;
.border-teal-light border-color: #64d5ca;
.border-teal-lighter border-color: #a0f0ed;
.border-teal-lightest border-color: #e8fffe;
.border-blue-darkest border-color: #12283a;
.border-blue-darker border-color: #1c3d5a;
.border-blue-dark border-color: #2779bd;
.border-blue border-color: #3490dc;
.border-blue-light border-color: #6cb2eb;
.border-blue-lighter border-color: #bcdefa;
.border-blue-lightest border-color: #eff8ff;
.border-indigo-darkest border-color: #191e38;
.border-indigo-darker border-color: #2f365f;
.border-indigo-dark border-color: #5661b3;
.border-indigo border-color: #6574cd;
.border-indigo-light border-color: #7886d7;
.border-indigo-lighter border-color: #b2b7ff;
.border-indigo-lightest border-color: #e6e8ff;
.border-purple-darkest border-color: #21183c;
.border-purple-darker border-color: #382b5f;
.border-purple-dark border-color: #794acf;
.border-purple border-color: #9561e2;
.border-purple-light border-color: #a779e9;
.border-purple-lighter border-color: #d6bbfc;
.border-purple-lightest border-color: #f3ebff;
.border-pink-darkest border-color: #451225;
.border-pink-darker border-color: #6f213f;
.border-pink-dark border-color: #eb5286;
.border-pink border-color: #f66d9b;
.border-pink-light border-color: #fa7ea8;
.border-pink-lighter border-color: #ffbbca;
.border-pink-lightest border-color: #ffebef;

Hover

In addition to the standard responsive variations, border colors also come in hover: variations that apply the given border color on hover.

<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold rounded">
  Button
</button>

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

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

Customizing

Responsive and State Variants

By default, only responsive and hover variants are generated for border color utilities.

You can control which variants are generated for the border color utilities by modifying the borderColors property in the modules section of your Tailwind config file.

For example, this config will also generate focus variants:

{
// ...
modules: {
    // ...
-   borderColors: ['responsive', 'hover'],
+   borderColors: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the border color utilities in your project, you can disable them entirely by setting the borderColors property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   borderColors: ['responsive', 'hover'],
+   borderColors: false,
}
}