Border Width

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

Tailwind CSS

Class	Properties
border-0	border-width: 0px;
border-2	border-width: 2px;
border-4	border-width: 4px;
border-8	border-width: 8px;
border	border-width: 1px;
border-thin	border-width: 1px;
border-thick	border-width: 2px;

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 class="border border-copilot-primary ..."></div>
<div class="border-2 border-copilot-primary ..."></div>
<div class="border-4 border-copilot-primary ..."></div>
<div class="border-8 border-copilot-primary ..."></div>

Individual sides

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

<div class="border-t-4 border-copilot-primary ..."></div>
<div class="border-r-4 border-copilot-primary ..."></div>
<div class="border-b-4 border-copilot-primary ..."></div>
<div class="border-l-4 border-copilot-primary ..."></div>

Horizontal and vertical sides

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

<div class="border-x-4 border-copilot-primary ..."></div>
<div class="border-y-4 border-copilot-primary ..."></div>

Between elements

You can also add borders between child elements using the divide-x-* and divide-y-* width utilities along with the divide-* color utilities.

<div class="divide-y divide-gray-200 ...">
	<div>01</div>
	<div>02</div>
	<div>03</div>
</div>

Learn more in the Divide Width and Divide Color documentation.

Using logical properties

Use the border-s-* and border-e-* utilities to set the border-inline-start-width and border-inline-end-width logical properties, which map to either the left or right border based on the text direction.

<div dir="ltr">
	<div class="border-s-4 ..."></div>
<div>

<div dir="rtl">
	<div class="border-s-4 ..."></div>
<div>

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.