Utilities for controlling the style of an element's outline.
2025-03-13
Written by: tdtc
| Class | Styles |
|---|---|
| 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; outline-offset: 2px; |
Use utilities like outline-solid and outline-dashed to set the style of an element’s outline:
<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>Use the outline-hidden utility to hide the default browser
outline on focused elements, while still preserving the outline in forced colors mode:
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />It is highly recommended to apply your own focus styling for accessibility when using this utility.
Use the outline-none utility to completely remove the default browser outline on focused elements:
<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>It is highly recommended to apply your own focus styling for accessibility when using this utility.