Conoce la propiedad outline con CSS

Definición	Establece algunas o todas las propiedades de todos los perfiles de los elementos
Valores permitidos	Alguno o todos los siguientes valores y en cualquier orden: outline-color outline-style outline-width
Valor inicial	Cada propiedad define su propio valor por defecto
Se aplica a	Todos los elementos
Válida en	medios visuales, interactive
Se hereda	no
Definición en el estándar	w3.org/TR/CSS21/ui.html#propdef-outline

La propiedad outline es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En este caso, se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los perfiles de un elemento.

Aunque es cierto que guarda muchas similitudes con la propiedad border, en realidad se diferencian en algunos aspectos muy importantes:

1. Los perfiles no ocupan espacio, mientras que los bordes normales sí.
2. Los perfiles pueden tener formas no rectangulares.

Desde el punto de vista del diseño, la primera característica es la más importante. Los perfiles uoutline siempre se dibujan "por encima del elemento", por lo que no modifican la posición o el tamaño total de los elementos.

En el siguiente ejemplo se muestran dos cajas; la primera muestra un borde muy grueso y la segunda muestra un perfil de la misma anchura:

div { border: 5px solid #369; }

div { outline: 5px solid #369; }

El perfil de la segunda caja se dibuja justo por el exterior de su borde. Aunque visualmente no lo parece, el perfil y el borde no se encuentran en el mismo plano. De esta forma, el perfil no se tiene en cuenta para calcular la anchura total de un elemento y no influye en el resto de elementos cercanos.

La segunda característica importante de los perfiles pueden tener formas no rectangulares. En el siguiente ejemplo se muestra un texto muy largo encerrado en una caja muy estrecha, lo que provoca que el texto se muestre en varias líneas:

span { border: 2px solid #369; } Ejemplo de texto largo que ocupa varias líneas

span { outline: 2px solid #369; } Ejemplo de texto largo que ocupa varias líneas

El primer texto se encierra con un borde que produce un resultado estético poco afortunado. Cada línea muestra un borde superior e inferior, aunque sólo la primera y última líneas cierran el borde lateralmente.

Mientras tanto, el segundo texto se encierra con un perfil. Como indica su nombre, la propiedadoutline perfila los contenidos del elemento y los encierra con una forma no rectangular. No obstante, si visualizas esta misma página en diferentes navegadores, verás que todos los navegadores dibujan el perfil de forma diferente, al contrario de lo que sucede con el borde.

Por este motivo, al contrario que los bordes, no existe el concepto de perfil izquierdo o perfil superior. El perfil de un elemento es único y sus propiedades son idénticas para cada uno de los cuatro lados.

Como sucede con muchas propiedades de tipo shorthand, el orden en el que se indican los valores de la propiedd outline es indiferente:

div { outline: 1px solid #C00; }

div { outline: solid 1px #C00; }

div { outline: #C00 1px solid; }

div { outline: #C00 solid 1px; }

La propiedad outline no requiere que se indiquen las tres propiedades que definen el estilo de los perfiles. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.

En el siguiente ejemplo sólo se indica el estilo del perfil, por lo que el navegador asigna automáticamente el valor medium a su grosor y el color se escoge para que tenga el máximo contraste con el fondo de la página:

div { outline: solid; }

En el siguiente ejemplo se omite el grosor del perfil, por lo que el navegador le asigna automáticamente el valor medium:

div { outline: solid blue; }

No obstante, como el valor por defecto del estilo de un perfil es none, si no se indica explícitamente el estilo del perfil, el resultado es que el navegador no muestra ese perfil:

div { outline: 2px blue; }

El grosor del perfil se puede establecer de cualquiera de las diferentes formas de indicar una medida en CSS. El color también se puede establecer de alguna de las diferentes formas de indicar un color en CSS, con la particularidad del valor invert que selecciona el color que tenga más contraste con el color de fondo. Por último, el estilo del perfil se establece con los mismos valores que los que se utilizan en la propiedad border-style.

Aunque la propiedad outline es infinitamente menos utilizada que la propiedad border, la has visto muchas más veces de las que crees. Si pulsas repetidamente la tecla del tabulador en una página web, el navegador va seleccionando de forma secuencial todos los elementos pinchables oseleccionables: enlaces, botones, controles de formulario, etc.

Para indicar el elemento que está seleccionado, el navegador muestra un perfil muy fino de 1px de ancho, de estilo punteado y del color que más contrasta con el color de fondo de la página. En la mayoría de las páginas web, el perfil que se muestra por defecto es outline: 1px dotted #000.

Los navegadores más avanzados incluyen una pseudo-clase llamada :focus que permite establecer el estilo de los elementos seleccionados. Utilizando la propiedad outline junto con :focus se puede modificar el estilo por defecto del navegador:

<style type="text/css">
:focus { outline: 2px solid red; }
</style>

Si pruebas a pulsar repetidamente la tecla Tabulador en una página que incluya la regla CSS anterior, verás que el navegador selecciona secuencialmente los enlaces de la página y muestra un perfil continuo de color rojo para indicar el elemento que está seleccionado en cada momento.

De hecho, según el estándar oficial, ese es el propósito para el que se crearon los perfiles: indicar de forma clara el elemento (botón, enlace, otros controles de formulario) que está seleccionado en cada momento.

Fuente: enlace