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
