border-color

Utilities for controlling the color of an element import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx";

Examples

Basic example

Use utilities like border-rose-500 and border-lime-100 to control the border color of an element:

Changing the opacity

Use the color opacity modifier to control the opacity of an element's border color:

Individual sides

Use utilities like border-t-indigo-500 and border-r-lime-100 to set the border color for one side of an element:

Horizontal and vertical sides

Use utilities like border-x-indigo-500 and border-y-lime-100 to set the border color on two sides of an element at the same time:

Using logical properties

Use utilities like border-s-indigo-500 and border-e-lime-100 to set the border-inline-start-color and border-inline-end-color logical properties, which map to either the left or right border based on the text direction:

Use the border-bs-* and border-be-* utilities to set the border-block-start-color and border-block-end-color logical properties, which map to either the top or bottom border based on the writing mode:

<!-- [!code classes:border-bs-indigo-500] -->
<div class="border-bs-indigo-500 ..."></div>

Divider between children

Use utilities like divide-indigo-500 and divide-lime-100 to control the border color between child elements:

Using a custom value

Applying on focus

Responsive design

Customizing your theme