Este es un truco interesante que me encontré AQUI , como sabemos usando la propiedad border se puede crear un borde simple pero si queremos más de un borde hasta donde sabía era imposible, salvo colocando un div dentro de otro pero ahora me doy cuenta que no hace falta.
El código HTML
Vamos a probar con un sólo DIV, el código sería:
[cc lang=»html»]
[/cc]
Hasta ahí nada de raro, ahora veamos el código CSS
La hoja de estilos
[cc lang=»css»]
#box {
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
}
#box:before {
border: 1px solid white;
content: »;
width: 198px;
height: 198px;
position: absolute;
}
#box:after {
content: »;
position: absolute;
width: 196px;
height: 196px;
border: 1px solid #bbbbbb;
left: 1px; top: 1px;
}
[/cc]
El truco está en el uso de las pseudo-clases : before y after, al darles formato podemos aplicar un borde adicional, de hecho podríamos ponerle lo que deseemos para lograr un efecto más elaborado.
El demo pueden verlo AQUI
