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

import { ApiTable } from "@/components/api-table.tsx";
import {
  CustomizingYourThemeColors,
  ResponsiveDesign,
  TargetingSpecificStates,
  UsingACustomValue,
} from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import colors from "./utils/colors";
import dedent from "dedent";

export const title = "border-color";
export const description = "Utilities for controlling the color of an element's borders.";

<ApiTable
  rows={[
    ...[
      ["border", (value) => `border-color: ${value}`],
      ["border-x", (value) => `border-inline-color: ${value}`],
      ["border-y", (value) => `border-block-color: ${value}`],
      ["border-s", (value) => `border-inline-start-color: ${value}`],
      ["border-e", (value) => `border-inline-end-color: ${value}`],
      ["border-t", (value) => `border-top-color: ${value}`],
      ["border-r", (value) => `border-right-color: ${value}`],
      ["border-b", (value) => `border-bottom-color: ${value}`],
      ["border-l", (value) => `border-left-color: ${value}`],
      ["divide", (value) => `& > :not(:last-child) {\n  border-color: ${value}\n}`],
    ].flatMap(([utility, css]) => [
      [`${utility}-inherit`, css("inherit;")],
      [`${utility}-current`, css("currentColor;")],
      [`${utility}-transparent`, css("transparent;")],
      ...Object.entries(colors).map(([name, value]) => [
        `${utility}-${name}`,
        css(`var(--color-${name}); /* ${value} */`),
      ]),
      [`${utility}-(<custom-property>)`, css("var(<custom-property>);")],
      [`${utility}-[<value>]`, css("<value>;")],
    ]),
  ]}
/>

## Examples

### Basic example

Use utilities like `border-rose-500` and `border-lime-100` to control the border color of an element:

<Figure>

<Example>
  {
    <div className="grid gap-4 text-center text-sm leading-6 font-bold text-white lg:grid-cols-3">
      <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-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-500 bg-white p-4 dark:bg-gray-900"></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-purple-500
        </p>
        <div className="size-16 border-4 border-purple-500 bg-white p-4 dark:bg-gray-900"></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-sky-500
        </p>
        <div className="size-16 border-4 border-sky-500 bg-white p-4 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-indigo-500,border-purple-500,border-sky-500] -->
<div class="border-4 border-indigo-500 ..."></div>
<div class="border-4 border-purple-500 ..."></div>
<div class="border-4 border-sky-500 ..."></div>
```

</Figure>

### Changing the opacity

Use the color opacity modifier to control the opacity of an element's border color:

<Figure>

<Example>
  {
    <div className="grid gap-4 text-center text-sm leading-6 font-bold text-white lg:grid-cols-3">
      <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-indigo-500/100
        </p>
        <div className="size-16 border-4 border-indigo-500/100 bg-white p-4 dark:bg-gray-900"></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-indigo-500/75
        </p>
        <div className="size-16 border-4 border-indigo-500/75 bg-white p-4 dark:bg-gray-900"></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-indigo-500/50
        </p>
        <div className="size-16 border-4 border-indigo-500/50 bg-white p-4 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<div class="border-4 border-indigo-500/100 ..."></div>
<div class="border-4 border-indigo-500/75 ..."></div>
<div class="border-4 border-indigo-500/50 ..."></div>
```

</Figure>

### Individual sides

Use utilities like `border-t-indigo-500` and `border-r-lime-100` to set the border color for one side of an element:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-8 text-center text-sm leading-6 font-bold text-white sm:grid-cols-2">
      <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-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-t-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-t-indigo-500 dark:bg-gray-900"></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-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-r-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-r-indigo-500 dark:bg-gray-900"></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-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-b-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-b-indigo-500 dark:bg-gray-900"></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-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-l-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-l-indigo-500 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-t-indigo-500,border-r-indigo-500,border-b-indigo-500,border-l-indigo-500] -->
<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>
```

</Figure>

### Horizontal and vertical sides

Use utilities like `border-x-indigo-500` and `border-y-lime-100` to set the border color 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-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-x-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-x-indigo-500 dark:bg-gray-900"></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-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-y-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-y-indigo-500 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-x-indigo-500,border-y-indigo-500] -->
<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>
```

</Figure>

### Using logical properties

Use utilities like `border-s-indigo-500` and `border-e-lime-100` to set the `border-inline-start-color` and `border-inline-end-color` [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-4 border-indigo-200 border-s-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-s-indigo-500 dark:bg-gray-900"></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-4 border-indigo-200 border-s-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-s-indigo-500 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-s-indigo-500,border-s-indigo-500] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div dir="ltr">
  <div class="border-s-indigo-500 ..."></div>
</div>
<div dir="rtl">
  <div class="border-s-indigo-500 ..."></div>
</div>
```

</Figure>

### Divider between children

Use utilities like `divide-indigo-500` and `divide-lime-100` to control the border color 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-indigo-500] -->
<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="border" name="border color" value="#243c5a" />

### Applying on focus

<TargetingSpecificStates property="border-color" variant="focus">

<Figure>

<Example>
  {
    <label className="mx-auto block max-w-xs">
      <span className="text-sm font-medium text-gray-900 dark:text-gray-200">Email address</span>
      <input
        type="text"
        placeholder="jane@example.com"
        className="block w-full rounded-lg border-2 border-gray-700 px-3 py-2 font-sans text-sm leading-5 text-gray-500 focus:border-pink-600 focus:outline-none dark:bg-gray-900 dark:text-gray-400 dark:placeholder:text-gray-600"
      />
    </label>
  }
</Example>

```html
<!-- [!code classes:focus:border-pink-600] -->
<input class="border-2 border-gray-700 focus:border-pink-600 ..." />
```

</Figure>

</TargetingSpecificStates>

### Responsive design

<ResponsiveDesign property="border-color" defaultClass="border-blue-500" featuredClass="border-green-500" />

## Customizing your theme

<CustomizingYourThemeColors utility="border" />