Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

outline-style

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
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;\noutline-offset: 2px;

Examples#

Basic example#

Use utilities like outline-solid and outline-dashed to set the style of an element's outline:

{

outline-solid

outline-dashed

outline-dotted

outline-double

}

<!-- [!code classes:outline-solid,outline-dashed,outline-dotted,outline-double] -->
<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>

Hiding an outline#

Use the outline-hidden utility to hide the default browser outline on focused elements, while still preserving the outline in forced colors mode:

{ }

<!-- [!code classes:focus:outline-hidden] -->
<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.

Removing outlines#

Use the outline-none utility to completely remove the default browser outline on focused elements:

{