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