1. Bordes
  2. outline-style

Bordes

outline-style

Utilidades para controlar el estilo del contorno de un elemento.

ClaseEstilos
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;

Ejemplos

Ejemplo básico

Usa utilidades como outline-solid y outline-dashed para establecer el estilo del contorno de un elemento:

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>

Ocultando un contorno

Usa la utilidad outline-hidden para ocultar el contorno predeterminado del navegador en los elementos enfocados, mientras conservas el contorno en el modo de colores forzados:

Intenta emular `forced-colors: active` en tus herramientas de desarrollador para ver el comportamiento

<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />

Se recomienda encarecidamente aplicar tu propio estilo de enfoque por accesibilidad al usar esta utilidad.

Eliminando contornos

Usa la utilidad outline-none para eliminar por completo el contorno predeterminado del navegador en los elementos enfocados:

<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>

Se recomienda encarecidamente aplicar tu propio estilo de enfoque por accesibilidad al usar esta utilidad.

Diseño Responsive

Prefija una utilidad outline-style con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

Copyright © 2025 Tailwind Labs Inc.·Política de Marca Registrada