Blog

Una manera muy sencilla de tener varios bordes o mejor dicho el efecto de tener varios bordes en un contenedor o elemento es utilizando la propiedad box-shadow; veamos:

Sintaxis de la propiedad box-shadow

box-shadow: x y difuminado propagado color inset;

Creando bordes con la propiedad box-shadow

Utilizaremos los siguientes atributos para conseguir múltiples bordes con la propiedad box-shadow:

box-shadow: x y difuminado propagado color;

Con estos simples pasos creamos un par de bordes de 2px cada uno; el primero de color verde y el segundo de color rojo:

box-shadow: 0 0 0 2px green, 0 0 0 4px red;

Podemos tener bordes de distintos tamaños:

box-shadow: 0 0 0 2px green, 0 0 0 6px red;

O todos los bordes que queramos en un mismo contenedor:

box-shadow: 0 0 0 2px green, 0 0 0 4px red, 0 0 0 6px blue, 0 0 0 8px yellow; 

Consideraciones generales

• Los primeros tres valores de la propiedad box-shadow deben de estar seteados en cero; y esto es para que los bordes respecto al los ejes vertical y horizontal se encuentren centrados y parejos al contenedor y que el borde del contenedor sea de un color sólido; en otras palabras que no se difumine.
• Los primeros bordes que definimos deben ser de un menor tamaño a los próximos o siguientes definidos; de otra forma los internos solapan a los bordes externos; veamos un caso de ejemplo:

  box-shadow: 0 0 0 3px green, 0 0 0 3px red;
          

   

  Podemos apreciar que el borde de color rojo es solapado por el primer borde de color verde; y esto es debido a que tienen el mismo tamaño. Simplemente tenemos que ir haciendo el borde más grande que el borde anterior; de esta forma conseguimos el efecto de que hay múltiples border en un mismo contenedor.>