ContextQMD
Back to Tailwindcss

Border Width

src/docs/border-width.mdx

latest13.3 KB
Original Source

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.";

<ApiTable rows={[ ["border", "border-width: 1px;"], ["border-<number>", "border-width: <number>px;"], ["border-(length:<custom-property>)", "border-width: var(<custom-property>);"], ["border-[<value>]", "border-width: <value>;"], ["border-x", "border-inline-width: 1px;"], ["border-x-<number>", "border-inline-width: <number>px;"], ["border-x-(length:<custom-property>)", "border-inline-width: var(<custom-property>);"], ["border-x-[<value>]", "border-inline-width: <value>;"], ["border-y", "border-block-width: 1px;"], ["border-y-<number>", "border-block-width: <number>px;"], ["border-y-(length:<custom-property>)", "border-block-width: var(<custom-property>);"], ["border-y-[<value>]", "border-block-width: <value>;"], ["border-s", "border-inline-start-width: 1px;"], ["border-s-<number>", "border-inline-start-width: <number>px;"], ["border-s-(length:<custom-property>)", "border-inline-start-width: var(<custom-property>);"], ["border-s-[<value>]", "border-inline-start-width: <value>;"], ["border-e", "border-inline-end-width: 1px;"], ["border-e-<number>", "border-inline-end-width: <number>px;"], ["border-e-(length:<custom-property>)", "border-inline-end-width: var(<custom-property>);"], ["border-e-[<value>]", "border-inline-end-width: <value>;"], ["border-bs", "border-block-start-width: 1px;"], ["border-bs-<number>", "border-block-start-width: <number>px;"], ["border-bs-(length:<custom-property>)", "border-block-start-width: var(<custom-property>);"], ["border-bs-[<value>]", "border-block-start-width: <value>;"], ["border-be", "border-block-end-width: 1px;"], ["border-be-<number>", "border-block-end-width: <number>px;"], ["border-be-(length:<custom-property>)", "border-block-end-width: var(<custom-property>);"], ["border-be-[<value>]", "border-block-end-width: <value>;"], ["border-t", "border-top-width: 1px;"], ["border-t-<number>", "border-top-width: <number>px;"], ["border-t-(length:<custom-property>)", "border-top-width: var(<custom-property>);"], ["border-t-[<value>]", "border-top-width: <value>;"], ["border-r", "border-right-width: 1px;"], ["border-r-<number>", "border-right-width: <number>px;"], ["border-r-(length:<custom-property>)", "border-right-width: var(<custom-property>);"], ["border-r-[<value>]", "border-right-width: <value>;"], ["border-b", "border-bottom-width: 1px;"], ["border-b-<number>", "border-bottom-width: <number>px;"], ["border-b-(length:<custom-property>)", "border-bottom-width: var(<custom-property>);"], ["border-b-[<value>]", "border-bottom-width: <value>;"], ["border-l", "border-left-width: 1px;"], ["border-l-<number>", "border-left-width: <number>px;"], ["border-l-(length:<custom-property>)", "border-left-width: var(<custom-property>);"], ["border-l-[<value>]", "border-left-width: <value>;"], [ "divide-x", dedent & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: 1px; } , ], [ "divide-x-<number>", dedent & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <number>px; } , ], [ "divide-x-(length:<custom-property>)", dedent & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: var(<custom-property>); } , ], [ "divide-x-[<value>]", dedent & > :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-<number>", dedent & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <number>px; } , ], [ "divide-y-(length:<custom-property>)", dedent & > :not(:last-child) { border-top-width: 0px; border-bottom-width: var(<custom-property>); } , ], [ "divide-y-[<value>]", dedent & > :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:

<Figure> <Example> { <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border</p> <div className="size-16 border border-indigo-600 p-4"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-2</p> <div className="size-16 border-2 border-indigo-600 p-4"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-4</p> <div className="size-16 border-4 border-indigo-600 p-4"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-8</p> <div className="size-16 border-8 border-indigo-600 p-4"></div> </div> </div> } </Example>
html
<!-- [!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>
</Figure>

Individual sides

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

<Figure> <Example> { <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-t-4</p> <div className="size-16 border-t-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-r-4</p> <div className="size-16 border-r-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-b-4</p> <div className="size-16 border-b-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-l-4</p> <div className="size-16 border-l-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div> </div> </div> } </Example>
html
<!-- [!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>
</Figure>

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:

<Figure> <Example> { <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-x-4</p> <div className="size-16 border-x-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-y-4</p> <div className="size-16 border-y-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div> </div> </div> } </Example>
html
<!-- [!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>
</Figure>

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:

<Figure> <Example> { <div className="grid grid-cols-2 place-items-center gap-x-4"> <div className="flex flex-col items-start gap-y-4" dir="ltr"> <p className="text-sm font-medium">Left-to-right</p> <div className="size-16 border-s-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div> </div> <div className="flex flex-col items-start gap-y-4" dir="rtl"> <p className="text-sm font-medium">Right-to-left</p> <div className="size-16 border-s-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div> </div> </div> } </Example>
html
<!-- [!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>
</Figure>

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:

html
<!-- [!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:

<Figure> <Example> { <div className="mx-auto grid max-w-lg grid-cols-3 divide-x-4 divide-indigo-500 rounded-lg text-center font-mono text-sm leading-6 font-bold text-gray-400"> <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">01</div> <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">02</div> <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">03</div> </div> } </Example>
html
<!-- [!code classes:divide-x-4] -->
<div class="grid grid-cols-3 divide-x-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
</Figure>

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:

<Figure> <Example> { <div className="mx-auto flex max-w-sm flex-col-reverse divide-y-4 divide-y-reverse divide-indigo-500 rounded-lg text-center font-mono text-sm leading-6 font-bold text-gray-400"> <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">01</div> <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">02</div> <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">03</div> </div> } </Example>
html
<!-- [!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>
</Figure>

Using a custom value

<UsingACustomValue utility="border" name="border width" value="2vw" dataType="length" variable="border-width" />

Responsive design

<ResponsiveDesign property="border-width" defaultClass="border-2" featuredClass="border-t-4" />