Border color
Utilities for controlling the color of an element's borders
Class reference
Usage
Control the border color of an element using the .border-{color}
utilities.
Changing opacity
Control the opacity of an element’s background color using the .border-opacity-{amount}
utilities.
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.
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.
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 ...">
On this Page
v1.13.5