Múltiples bordes en un contenedor con CSS
- Andrés Cruz
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;
Valor | Descripción |
---|---|
x | Requerido. La posición de la sombra en el eje horizontal. |
y | Requerido. La posición de la sombra en el eje vertical. |
difuminado | Opcional. Difuminado del borde. |
propagado | Opcional. Tamaño de la sombra. |
color | Opcional. Color de la sombra. |
inset | Opcional. Si está presente, el borde aparecerá dentro del elemento. |
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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter