La propiedad Outline nos permite crear un contorno dinámico alrededor de los elementos. Esta propiedad se define justo fuera del límite del border. Se tiende a comparar con la propiedad border de forma errónea ya que son propiedades distintas. Por ejemplo, al contrario que lo que ocurre con la propiedad border, la propiedad outline no puede tener un valor por cada lado, solo optará por dar un valor al elemento único, es decir, no existe outline-left ni outline-top, se le aplica el valor a todo el elemento completo.

Las propiedades hijas de outline son:

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

Outline vs. Border

Son propiedades distintas ya que:
1 – No existe outline-top ni outline-left.
2 – La propiedad Outline no tiene el valor hidden.
3 – Los contornos que crea dicha propiedad no ocupan espacio.
4 – Los contornos no tienen porqué ser rectangulares.

Valores permitidos de la propiedad Outline

Se permiten solo uno de estos valores:

• none
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• inherit

Ejemplo de la propiedad Outline

Se muestra un ejemplo con cada valor con la propiedad Outline mediante una imagen (por si algún navegador no puede mostrarlo correctamente):

Vía | Libros web