Outline Style

Basic usage

Setting the outline style

Use the outline-{style} utilities to change the style of an element's outline.

<button className="**outline** outline-2  outline-offset-2 ...">
  Button A
</button>
<button className="**outline-dashed** outline-2 outline-offset-2 ...">
  Button B
</button>
<button className="**outline-dotted** outline-2 outline-offset-2 ...">
  Button C
</button>
<button className="**outline-double** outline-3 outline-offset-2 ...">
  Button D
</button>

Removing outlines

Use outline-none to hide the default browser outline on focused elements.

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

<input type="text" placeholder="Default focus style" className="..." />

<input
  type="text"
  placeholder="Custom focus style"
  className="**focus:outline-none focus:ring focus:border-blue-500** ..."
/>

The outline-none utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to Windows high contrast mode users.