Border color

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

In this article

Class Properties
.border-transparent border-color: transparent;
.border-current border-color: currentColor;

Usage

Use .border-{color} to control the border color of an element.

Border color utilities are generated for all colors defined in the theme’s Sass $colors variable. By default this includes all colors except for the Heading, Text, Link and Outline theme colors.

<div class="border border-red-500"></div>
<div class="border border-green-500"></div>
<div class="border border-orange-500"></div>
<div class="border border-gray-800"></div>

Variants

By default, both responsive or hover-state variants are generated for border color utilities.

Responsive

To control the border color for an element at a specific breakpoint, add a {screen}: prefix to any existing border color utility.

For example, use .md:border-gray-800 to apply the border-gray-800 utility at only medium screen sizes and above.

Hover-state

To control the border color for an element’s hover state, add a hover: prefix to any existing border color utility.

For example, use .hover:border-gray-800 to apply the border-gray-800 utility when the element’s hover state is active.

Questions or feedback about this article? Let us know