Borders

Outline Style

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

Quick reference

Basic usage

Setting the outline style

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

<button class="outline outline-2  outline-offset-2 ...">Button A</button>
<button class="outline-dashed outline-2 outline-offset-2 ...">Button B</button>
<button class="outline-dotted outline-2 outline-offset-2 ...">Button C</button>
<button class="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.

Focus the input to see the expected behaviour

<input type="text"
  placeholder="Default focus style"
  class="..." />
<input type="text"
  placeholder="Custom focus style"
  class="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.

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:outline-dashed to only apply the outline-dashed utility on hover.

<div class="outline hover:outline-dashed">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:outline-dashed to apply the outline-dashed utility at only medium screen sizes and above.

<div class="outline md:outline-dashed">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.