Outline nos permite crear un contorno dinámico (que bien suena esto :D) alrededor de los objetos, imágenes, controles de un formulario, etc.

La propiedad de CSS «outline» es una gran desconocida, creo que le hace sombra la famosa propiedad «border» aunque de forma mal interpretada.

¿Qué es un contorno dinámico?

Es aquel que se forma alrededor del elemento sin afectar a la maquetación. Por lo tanto, mostrar u ocultar los contornos no provoca el redibujado de los elementos afectados ni adyacentes.

Cabe destacar que el contorno se dibuja justo fuera del limite del «border».

Las propiedades hijas de outline

• outline-width
• outline-style
• outline-color

Outline vs. Border

Son propiedades diferentes:

• Los contornos no ocupan espacio.
• Los contornos pueden ser no rectangulares.
• No existen outline-top, outline-left.
• La propiedad outline-style no acepta el valor «hidden».

Usando outline

Yo recurro mucho a esta propiedad para la interacción con los controles de un formulario.

input:focus[type=text], 
textarea:focus, 
select:focus { 
	outline: 1px solid #3EB3D6; 
}  

En este CSS indico que a través de los pseudo-selectores:

• input:focus[type=text]: controles de entrada de datos (solamente de tipo text, no botones)
• textarea:focus: áreas textuales
• select:focus: controles de tipo desplegable con varias opciones.

Cuando estos controles reciben el foco se dibuja un contorno dinámico de 1px de grosor, de estilo solido y con el color #3EB3D6.