CSS | Cómo hacer bordes múltiples con CSS

Por: Nicolas Seijas | Categoría: HTML & CSS

Si alguna vez te preguntaste como hacer bordes dobles en tus divs, este pequeño truco de CSS te ayudará a hacer bordes múltiples sin la necesidad de usar imagenes para ello y con la gran ventaja de que esta soportado por todos los exploradores.

Demostración del efecto

1) Lo primero que debemos hacer es la DIV en la que queremos crear el efecto:

<head>
<style>
#borde {
background: #f9f9f9;
border: 1px solid #bbbbbb;
width: 250px;
height: 250px;
margin: auto;
position: relative;
}
</style>
</head>
<body>
<div id="borde"></div>
</body>

2) Para crear el efecto del borde multiple, usaremos los Pseudo-elementos BEFORE-AFTER:

#borde:before {
border: 1px solid white;
content: '';
width: 248px;
height: 248px;
position: absolute;
}

/* Escribir el siguiente código solamente si se desean 3 bordes */

/*#borde:after {
content: '';
position: absolute;
width: 246px;
height: 246px;
border: 1px solid #bbbbbb;
left: 1px; top: 1px;
}*/

Analizando el código:

#borde:before /* Mantenemos el mismo nombre de la DIV original, pero le agregamos el elemento :before */
{border: 1px solid white; /* Este sera el ancho, color y estilo del borde */
content: ''; /* Características de la div */
width: 248px;
height: 248px;
position: absolute;}

#borde:after /* Mantenemos el mismo nombre de la DIV original, pero le agregamos el elemento :before */
{border: 1px solid #bbbbbb; /* Este sera el ancho, color y estilo del borde */content: ''; /*Características de la div */
position: absolute;
width: 246px;
height: 246px;
left: 1px; top: 1px;}

Via: Nettuts

¿Te gustó el artículo?

Recomiendalo a través de las redes sociales

Tal vez te interese...

Comentarios

Este artículo no tiene comentarios

¡Se el primero en comentar!

Si deseas agregar un código a tu comentario por favor usa el siguiente formato: <pre name="code" class="php">Tu código</pre>. Puedes reemplazar la clase con "js", "css", "sql", o "html". Si el código tiene algún "<" o ">" en tu código reemplazalo con: &lt; y &gt; respectivamente.