Border Width

Basic usage

All sides

Use the border, .border-0, .border-2, .border-4, or .border-8 utilities to set the border width for all sides of an element.

<div
  className="**border** border-indigo-600 ..."
  dark-className="**border** border-sky-500"
></div>
<div
  className="**border-2** border-indigo-600 ..."
  dark-className="**border-2** border-sky-500"
></div>
<div
  className="**border-4** border-indigo-600 ..."
  dark-className="**border-4** border-sky-500"
></div>
<div
  className="**border-8** border-indigo-600 ..."
  dark-className="**border-8** border-sky-500"
></div>

Individual sides

Use the border-{side}, .border-{side}-0, .border-{side}-2, .border-{side}-4, or .border-{side}-8 utilities to set the border width for one side of an element.

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

Horizontal and vertical sides

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

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

Between elements

You can also add borders between child elements using the divide-{x/y}-{width} and divide-{color} utilities.

<div
  className="**divide-y** divide-slate-200 ..."
  dark-className="**divide-y** divide-slate-700 ..."
>
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Learn more in the Divide Width and Divide Color documentation.