Esquema - Trucos CSS | Almanaque CSS 2024

La outlinepropiedad en CSS dibuja una línea alrededor del exterior de un elemento. Es similar a la frontera, excepto que:

Siempre da la vuelta a todos los lados, no puede especificar lados particulares
No es parte del modelo de caja, por lo que no afectará la posición del elemento o elementos adyacentes (¡bueno para depurar!)

Otros hechos menores incluyen que no respeta el radio del borde (supongo que tiene sentido ya que no es un borde) y que no siempre es rectangular. Si el contorno gira alrededor de un elemento en línea con diferentes tamaños de fuente, por ejemplo, Opera dibujará un cuadro escalonado alrededor de todo.

A menudo se usa por razones de accesibilidad, para enfatizar un enlace cuando se le asigna una pestaña sin afectar el posicionamiento y de una manera diferente a la de mantener el mouse.

a:focus ( outline: 1px dashed red; )

Taquigrafía

outline: ( || || ) | inherit

Toma las mismas propiedades que el borde, pero con "contorno-" en su lugar.

La taquigrafía anterior podría haberse escrito:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Notas

No puede establecer un contorno en solo uno (o dos o tres) lados de un elemento. Todos los lados solamente. No hay tal cosa como outline-top, outline-right, outline-bottom, o outline-leftcomo si es con border.
Intente abrir la consola en cualquier sitio web y ejecutarla document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");; verá gran parte de la estructura de los sitios de esa manera.
outlinese utiliza para :focusestilos de forma predeterminada. Recuerde que si alguna vez elimina outlineestilos, como a:focus ( outline: 0; ), debe volver a agregarlos utilizando algún otro tipo de estilo visualmente distinto.