border width

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

2025-03-29

Written by: tdtc

ClassStyles
borderborder-width: 1px;
border-<number>border-width: <number>px;
border-(length:<custom-property>)border-width: var(<custom-property>);
border-[<value>]border-width: <value>;

The meaning of the letters

inline
block
inline-start
inline-end
top
right
bottom
left

Between children

Basic example

Use border or border- utilities like border-2 and border-4 to set the border width for all sides of an element:

<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>

Individual sides

Use utilities like border-r and border-t-4 to set the border width for one side of an element:

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

Horizontal and vertical sides

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

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

Using logical properties

Use utilities like border-s and border-e-4 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>

Between children

Use utilities like divide-x and divide-y-4 to add borders between child elements:

<div class="grid grid-cols-3 divide-x-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Reversing children order

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the divide-x-reverse or divide-y-reverse utilities to ensure the border is added to the correct side of each element:

<div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Using a custom value

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

<div class="border-[2vw] ...">
  <!-- ... -->
</div>

Ref