Múltiples bordes en un contenedor con CSS

09-01-2014 - Andrés Cruz

Múltiples bordes en un contenedor con CSS

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!