HTML border query

Question

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.

Answer 1

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:

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

Answer 2

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>

Answer 3

How about wrapping the 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>

Answer 4

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/