Propiedad outline-width

Ejemplos de uso

La propiedad outline-width establece el grosor del perfil de los elementos. Al contrario de lo que sucede con la propiedad border-width, no se pueden establecer diferentes grosores para cada uno de los cuatro lados. De hecho, el perfil de un elemento es único, ya que no existe el concepto de perfil superior o perfil derecho.

La principal diferencia entre outline-width y border-width es que los perfiles no ocupan sitio, mientras que los bordes aumentan la anchura total del elemento. Los navegadores dibujan los perfiles en un plano superior, por lo que añadir un perfil a un elemento no aumenta su anchura ni influye sobre el resto de elementos de la página.

Por este motivo, si se definen perfiles muy gruesos o perfiles en elementos muy cercanos, se pueden producir solapamientos entre perfiles. Como los perfiles se dibujan en otro plano, los posibles solapamientos no descolocan ni desplazan a ningún elemento.

La propiedad outline-width permite establecer la anchura del perfil de un elemento de diferentes formas. En primer lugar, es posible utilizar las palabras thin, medium y thick para mostrar un perfil fino, normal y grueso respectivamente:

Como se observa en el ejemplo anterior, el perfil de los elementos siempre se dibuja por fuera de su borde. Además, como la especificación oficial no define de forma explícita el valor que corresponde a thin, medium y thick, cada navegador muestra los perfiles con un grosor diferente. Por este motivo no suelen utilizarse estas palabras especiales, ya que es imposible diseñar con ellas una página que muestre el mismo aspecto en diferentes navegadores.

Normalmente, el grosor de los perfiles se establece mediante una medida. La unidad de medida que más se utiliza es el píxel, ya que permite un control más preciso sobre el grosor del perfil:

Si se utiliza em como unidad de medida, su referencia es el tamaño de letra del propio elemento. En el siguiente ejemplo, el grosor del perfil de los dos elementos es 0.3em. Sin embargo, como el tamaño de letra del segundo <div> es mayor, su perfil es más grueso:

En el ejemplo anterior, como los elementos estan muy juntos y los perfiles son muy gruesos, se produce un solapamiento. Sin embargo, este solapamiento sólo es visual y no influye en el posicionamiento de ningún elemento.

Para eliminar el perfil de un elemento, se puede utilizar la propiedad outline-width con un grosor igual a 0:

Esta última propiedad se puede utilizar para cambiar el estilo por defecto del navegador. Si pulsas repetidamente la tecla del tabulador en una página web, el navegador va seleccionando de forma secuencial todos los elementos pinchables o seleccionables: 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-width junto con :focus se puede eliminar este perfil:

<style type="text/css">
:focus { outline-width: 0; }
</style>

Si pruebas a pulsar repetidamente la tecla Tabulador en esta página, verás como el navegador no muestra ningún perfil indicando el elemento que está seleccionado en cada momento.