CSS3: múltiples bordes

Para crear más de 2 bordes a un objeto la forma más sencilla es la de utilizar la propiedad «box-shadow» de CSS3.

Ejemplo de un elemento con 6 bordes (simulando los colores del arco iris) de 5px de grosor:

.box{
  box-shadow:
    0 0 0 5px red,
    0 0 0 10px yellow,
    0 0 0 15px green,
    0 0 0 20px cyan,
    0 0 0 25px blue,
    0 0 0 30px magenta
}

Síntaxis básica:

box-shadow: h-shadow v-shadow blur spread color;

• h-shadow: Posición de la sombra horizontal
• v-shadow: Posición de la sombra vertical
• blur (opcional): Desenfoque
• spread (opcional): Propagación
• color (opcional): Color