Consulta de borde HTML

I have a div that contains some text and the div has a background color. I would like a border around the div but I would like it so that there is 1px of white between the div and the border on all sides. Is this possible?

I've tried to use border: 3px double #000; but unfortunately this did not have the desired effect. The border ended up inside the div and the space between the two borders was the same colour as the background of the div.

I hope I have explained my query clearly. Thanks in advance for any help.

preguntado el 01 de febrero de 12 a las 14:02

4 Respuestas

You can achieve this by using the CSS3 box-shadow property and setting the spread and blur to low values. Check it out at http://www.sitepoint.com/css3-multiple-borders/

Respondido 01 Feb 12, 18:02

I'd recommend going with the css3 technique but if you do need to support older browsers such as ie8/7/6 then just have a div wrapped around another element.

.box {border:1px solid red;}
.box > div {padding:2px;}

<div class="box">
    <div>Hello</div>
</div>

Respondido 01 Feb 12, 18:02

¿Qué tal envolver el div within antoher div? Something like...

<div style='background-color: white; padding: 1px; border: 1px solid black;'>
    <div style='background-color: yellow;'>my text stuff goes here</div>
</div>

Respondido 01 Feb 12, 18:02

if you have to support only modern browser you can use CSS3 and define multiple borders on the same element with images or solid colours, otherwise styling :after or :before pseudoelements:

ver
http://tnels.com/2010/09/13/multiple-borders-in-css3/
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Respondido 01 Feb 12, 18:02

that solution requires images - tom

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.