Multiples bordes con CSS
Categories: CSS, html - Tags: CSS, maquetaciónEste 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:
Hasta ahí nada de raro, ahora veamos el código CSS
La hoja de estilos
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #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; } |
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
hola muchas gracias por el codigo tengo dos preguntas:
1. Es compatible con todos los navegadores?
2. Se puede aplicar redondeado es decir ejemplo en firefox(moz-border-radius)?
Saludos
Funciona sólo en navegadores modernos, asi que funciona en IE9, y si también funciona el moz-border-radius
Tambien funciona en IE8