# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-width.mdx

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-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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), 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>

### 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" />