W3cubDocs

/Tailwind CSS

border-color

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

Class Styles
border-inherit
border-color: inherit;
border-current
border-color: currentColor;
border-transparent
border-color: transparent;
border-black
border-color: var(--color-black); /* #000 */
border-white
border-color: var(--color-white); /* #fff */
border-red-50
border-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */
border-red-100
border-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
border-red-200
border-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
border-red-300
border-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */
border-red-400
border-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */

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:

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

Use the border-[<value>] syntax to set the border color based on a completely custom value:

<div class="border-[#243c5a] ...">
  <!-- ... -->
</div>

For CSS variables, you can also use the border-(<custom-property>) syntax:

<div class="border-(--my-border) ...">
  <!-- ... -->
</div>

This is just a shorthand for border-[var(<custom-property>)] that adds the var() function for you automatically.

Applying on focus

Prefix a border-color utility with a variant like focus:* to only apply the utility in that state:

Learn more about using variants in the variants documentation.

Responsive design

Prefix a border-color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="border-blue-500 md:border-green-500 ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.

Customizing your theme

Use the --color-* theme variables to customize the color utilities in your project:

@theme {
  --color-regal-blue: #243c5a; 
}

Now the border-regal-blue utility can be used in your markup:

<div class="border-regal-blue">
  <!-- ... -->
</div>

Learn more about customizing your theme in the theme documentation.

© Tailwind Labs Inc.
https://tailwindcss.com/docs/border-color