Border Color

Basic usage

Setting the border color

Control the border color of an element using the border-{color} utilities.

<input
  className="border-2 **border-rose-600** ..."
  dark-className="border-2 **border-rose-500** ..."
/>

Changing the opacity

Control the opacity of an element's border color using the color opacity modifier.

<div className="border-4 border-indigo-500**/100** ..."></div>
<div className="border-4 border-indigo-500**/75** ..."></div>
<div className="border-4 border-indigo-500**/50** ..."></div>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<div className="border-4 border-indigo-600**/[.55]** ..."></div>

Individual sides

Use the border-{side}-{color} utilities to set the border color for one side of an element.

<div className="border-4 border-indigo-200 **border-t-indigo-500** ..."></div>
<div className="border-4 border-indigo-200 **border-r-indigo-500** ..."></div>
<div className="border-4 border-indigo-200 **border-b-indigo-500** ..."></div>
<div className="border-4 border-indigo-200 **border-l-indigo-500** ..."></div>

Horizontal and vertical sides

Use the border-{x|y}-{color} utilities to set the border color on two sides of an element at the same time.

<div className="border-4 border-indigo-200 **border-x-indigo-500** ..."></div>
<div className="border-4 border-indigo-200 **border-y-indigo-500** ..."></div>