Border width
import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import dedent from "dedent";
export const title = "border-width"; export const description = "Utilities for controlling the width of an element's borders.";
& > :not(:last-child) {
border-inline-start-width: 0px;
border-inline-end-width: 1px;
},
],
[
"divide-x-\& > :not(:last-child) {
border-inline-start-width: 0px;
border-inline-end-width: <number>px;
},
],
[
"divide-x-(length:\& > :not(:last-child) {
border-inline-start-width: 0px;
border-inline-end-width: var(<custom-property>);
},
],
[
"divide-x-[\& > :not(:last-child) {
border-inline-start-width: 0px;
border-inline-end-width: <value>;
},
],
[
"divide-y",
dedent& > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: 1px;
},
],
[
"divide-y-\& > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: <number>px;
},
],
[
"divide-y-(length:\& > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: var(<custom-property>);
},
],
[
"divide-y-[\& > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: <value>;
},
],
["divide-x-reverse", "--tw-divide-x-reverse: 1;"],
["divide-y-reverse", "--tw-divide-y-reverse: 1;"],
]}
/>
Examples¶
Basic example¶
Use border or border-<number> utilities like border-2 and border-4 to set the border width for all sides of an element:
border
border-2
border-4
border-8
<!-- [!code classes:border,border-2,border-4,border-8] -->
<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:
border-t-4
border-r-4
border-b-4
border-l-4
<!-- [!code classes:border-t-4,border-r-4,border-b-4,border-l-4] -->
<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:
border-x-4
border-y-4
<!-- [!code classes:border-x-4,border-y-4] -->
<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:
Left-to-right
Right-to-left
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<!-- [!code classes:border-s-4] -->
<div dir="ltr">
<div class="border-s-4 ..."></div>
</div>
<div dir="rtl">
<div class="border-s-4 ..."></div>
</div>
Use the border-bs-<number> and border-be-<number> utilities to set the border-block-start-width and border-block-end-width logical properties, which map to either the top or bottom border based on the writing mode:
<!-- [!code classes:border-bs-4] -->
<div class="border-bs-4 ..."></div>
Between children¶
Use utilities like divide-x and divide-y-4 to add borders between child elements:
<!-- [!code classes:divide-x-4] -->
<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:
<!-- [!code classes:flex-col-reverse,divide-y-4,divide-y-reverse] -->
<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>