¿Has visto alguna vez ese bordecito a puntos alrededor de un enlace?

Suele aparecer cuando el enlace tiene el foco. ¿Si?, Bueno, de todas formas pongo una captura:

Bien, pues esa linea a puntitos no es ni padding, ni margin ni border, (realmente no pertenece al modelo de caja de CSS). Pues resulta que esto se llama contorno y se controla mediante la propiedad outline.

Los contornos se crean alrededor de elementos como enlaces, campos de formularios, mapas de images para destacarlos sobre el resto en un momento determinado (cuando tienen el foco, por ejemplo), y una cosa importante, se dibujan sobre la caja.

Sobre la caja, no en la caja, lo que implica que los contornos, a diferencia de los bordes no ocupan espacio, ni influyen en el tamaño de la caja ni del resto de cajas. En resumidas cuentas, mostrar u ocultar contornos no debe implicar el redibujado de nuestra página.

La otra gran diferencia con los bordes del modelo de cajas de CSS es que nuestros contornos pueden perfectamente no tener formas rectangulares, por ejemplo cuando nuestro elemento ocupa varias lineas de texto:

Vemos que el contorno mantiene siempre sus bordes cerrados, al contrario de lo que ocurre con los bordes:

que se abren o cierran al principio o final de las cajas, cuando es necesario.

Los contornos se controlan con tres propiedades básicas, outline-width, outline-style y outline-color. Que para entendernos funcionan igual (casi) que sus equiavalentes para bordes.

Antes de seguir, por si alguien lo esta pensando, los cuatro lados de un contorno son siempre iguales, nada de outline-top-width ni nada parecido.

outline-width:

El ancho de nuestro contorno, admite los valores thin (fino), medium (mediano) o thick (grueso) o una medida.

outline-style:

Admite los mismos valores que la propiedad border-style, expceto hidden. A saber:
none: Ningún borde.
dotted: El borde es una serie de puntos.
dashed: El borde es una serie de pequeños segmentos de línea.
solid: El borde es un único segmento de línea.
double: El borde son dos líneas sólidas.
groove: El borde luce como si estuviese tallado en el lienzo.
ridge: Lo opuesto a 'grove': el borde parece que estuviera sobresaliendo del lienzo.
inset: El borde hace que toda la caja luzca como si estuviera empotrada en el lienzo.
outset: Lo opuesto a 'inset': el borde hace que toda la caja parezca sobresalir del lienzo.

outline-color:

Pues eso, el color del contorno. Admite expresiones de color como #339966 o el valor invert, que fuerza el color de contorno al opuesto del lienzo, de forma que aseguramos que siempre será visible.

forma compacta

La forma compacta para la propiedad outline es:

outline: width style color

por ejemplo:

Aplicaciones prácticas

Todo esto esta muy bien, parece divertido, pero tambien puede ser util:

Ocultar el contorno en los enlaces

No se a vosotros, pero a mi me parece feo, que aparezca el contorno despues de pulsar un enlace.

y listo.

depurar una maquetación

Como los contornos no influyen en la posición ni tamaño de nuestras cajas este truco es genial para depurar una maquetación, y saber en todo momento donde esta cada cosa.