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

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

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

<ApiTable
  rows={[
    ["outline-solid", "outline-style: solid;"],
    ["outline-dashed", "outline-style: dashed;"],
    ["outline-dotted", "outline-style: dotted;"],
    ["outline-double", "outline-style: double;"],
    ["outline-none", "outline-style: none;"],
    ["outline-hidden", "outline: 2px solid transparent;\noutline-offset: 2px;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `outline-solid` and `outline-dashed` to set the style of an element's outline:

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 gap-x-4 gap-y-8 text-center text-sm font-semibold text-white">
      <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-solid</p>
        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-solid 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-dashed
        </p>
        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-dashed 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-dotted
        </p>
        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-dotted dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
          Button C
        </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-double
        </p>
        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-3 outline-offset-2 outline-indigo-500 outline-double dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
          Button D
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:outline-solid,outline-dashed,outline-dotted,outline-double] -->
<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button>
<button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button>
<button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button>
<button class="outline-3 outline-offset-2 outline-double ...">Button D</button>
```

</Figure>

### Hiding an outline

Use the `outline-hidden` utility to hide the default browser outline on focused elements, while still preserving the outline in forced colors mode:

<Figure hint="Try emulating `forced-colors: active` in your developer tools to see the behavior">

<Example>
  {
    <input
      type="text"
      placeholder="Your full name"
      className="mx-auto block w-full max-w-xs border-b-2 border-gray-300 bg-gray-50 px-2 py-2 text-sm text-gray-800 focus:border-indigo-600 focus:outline-hidden dark:border-white/15 dark:bg-white/5 dark:text-white dark:focus:border-indigo-500"
    />
  }
</Example>

```html
<!-- [!code classes:focus:outline-hidden] -->
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />
```

</Figure>

It is highly recommended to apply your own focus styling for accessibility when using this utility.

### Removing outlines

Use the `outline-none` utility to completely remove the default browser outline on focused elements:

<Figure>

<Example>
  {
    <div className="mx-auto flex max-w-md flex-col rounded-lg outline-1 outline-gray-300 focus-within:outline-2 focus-within:outline-indigo-600 dark:bg-white/5 dark:outline-transparent dark:focus-within:outline-indigo-500">
      <textarea className="w-full resize-none p-2 outline-none" placeholder="Leave a comment..." />
      <button
        className="mr-2 mb-2 inline-flex items-center self-end rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus:outline-2 focus:outline-offset-2 focus:outline-indigo-600"
        type="button"
      >
        Post
      </button>
    </div>
  }
</Example>

```html
<!-- [!code classes:outline-none] -->
<div class="focus-within:outline-2 focus-within:outline-indigo-600 ...">
  <textarea class="outline-none ..." placeholder="Leave a comment..." />
  <button class="..." type="button">Post</button>
</div>
```

</Figure>

It is highly recommended to apply your own focus styling for accessibility when using this utility.

### Responsive design

<ResponsiveDesign property="outline-style" defaultClass="outline" featuredClass="outline-dashed" />