Outline Style

Utilities for controlling the style of an element's outline.

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 className="**outline-dashed** outline-2 outline-offset-2 ...">
  Button B
<button className="**outline-dotted** outline-2 outline-offset-2 ...">
  Button C
<button className="**outline-double** outline-3 outline-offset-2 ...">
  Button D

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="..." />

  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.