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

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

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

<ApiTable
  rows={[
    ["outline-inherit", "outline-color: inherit;"],
    ["outline-current", "outline-color: currentColor;"],
    ["outline-transparent", "outline-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `outline-${name}`,
      `outline-color: var(--color-${name}); /* ${value} */`,
    ]),
    ["outline-(<custom-property>)", "outline-color: var(<custom-property>);"],
    ["outline-[<value>]", "outline-color: <value>;"],
  ]}
/>

## Examples

### Basic example

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

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-center gap-8 text-center text-sm font-bold text-white sm:flex-row sm:gap-16">
      <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">
          outline-blue-500
        </p>
        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
          Button A
        </button>
      </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">
          outline-cyan-500
        </p>
        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-cyan-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
          Button B
        </button>
      </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">
          outline-pink-500
        </p>
        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-pink-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
          Button C
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:outline-blue-500,outline-cyan-500,outline-pink-500] -->
<button class="outline-2 outline-offset-2 outline-blue-500 ...">Button A</button>
<button class="outline-2 outline-offset-2 outline-cyan-500 ...">Button B</button>
<button class="outline-2 outline-offset-2 outline-pink-500 ...">Button C</button>
```

</Figure>

### Changing the opacity

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

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-center gap-8 text-center text-sm font-bold text-white sm:flex-row sm:gap-16">
      <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">
          outline-blue-500/100
        </p>
        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/100 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
          Button A
        </button>
      </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">
          outline-blue-500/75
        </p>
        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/75 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
          Button B
        </button>
      </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">
          outline-blue-500/50
        </p>
        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/50 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
          Button C
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<button class="outline-2 outline-blue-500/100 ...">Button A</button>
<button class="outline-2 outline-blue-500/75 ...">Button B</button>
<button class="outline-2 outline-blue-500/50 ...">Button C</button>
```

</Figure>

### Using a custom value

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

### Responsive design

<ResponsiveDesign property="outline-color" defaultClass="outline" featuredClass="outline-blue-400" />

## Customizing your theme

<CustomizingYourThemeColors utility="outline" />