outline
Propiedades de los bordes - outline

<< Border margin >>

Propiedades de los bordes - outline

Esta propiedad es como un doble borde, de forma que podemos añadir otro borde al elemento por fuera del que asignábamos con la propiedad border.

¡Importante! A diferencia que los bordes, esta línea divisoria (outline), por defecto no ocupa espacio y no tiene porqué tener una forma rectangular.

Como se puede ver en este ejemplo donde hay cuatro párrafos, el primero con un outline negro a rayas, el segundo con puntos rojos, el tercero liso de color amarillo y el último ridge de color rosa.

Las propiedades son las mismas que para definir el borde, la única diferencia es que no diferenciaremos entre arriba, abajo, izquierda y derecha, sino que las propiedades del “outline" se aplicarán a los 4 lados.

  • outline-style: igual que border-style.
  • outline-width: igual que border-width.
  • outline-color: igual que border-color.
#doble_borde {     
     border: 2px solid green;
     outline: 2px solid red;
}

En CSS3, también está la propiedad outline-offset que nos permite ampliar el desplazamiento/espacio interior dentro del perfil del elemento. Ejemplo

<< Border margin >>