Elements logo

Outline

Utilities for controlling an element's outline

Class reference

ClassProperties
outline-noneoutline: 0;
outline-whiteoutline: 2px dotted white; outline-offset: 2px;
outline-blackoutline: 2px dotted black; outline-offset: 2px;

Usage

Use .outline-none to remove browser specific outlining of 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"
  class="..." />

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

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.

Dotted outlines

Use the outline-white and outline-black utilities to add a 2px dotted border around an element with a 2px offset. These are useful as an accessible general purpose custom focus style if you don’t want to design your own.

<button class="focus:outline-black ...">Button A</button>
<button class="focus:outline-white ...">Button B</button>