Question

I’m using the following code for the 2 borders of different colors, and space between the borders. I’m using the property outline-offset for the space between the borders. However it is not supported in IE (not even IE9).
Is there any alternate solution which works in the IE as well, without adding another div in the html.

HTML:

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

CSS:

.box{
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
    outline:2px solid red;
    outline-offset: 2px;    
}

The height and width is not fixed, i have just used for the example.

JSFiddle:
http://jsfiddle.net/xyXKa/

Answer 1

Here are two solutions. The first is IE8+ compatible, utilizing pseudoelements. View it on JSFiddle here.

HTML:

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

CSS:

.box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
}
.box:after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    display: block;
    width: 108px;
    height: 108px;
    border: 2px solid red;
}

​
The second idea I have is a non-semantic solution, but gives you IE6+ support. View it on JSFiddle here.

HTML:

<div class="outer-box"><div class="inner-box"></div></div>

​
CSS:

.outer-box {
    width: 104px;
    height: 104px;
    margin: 100px;
    border: 2px solid red;
    padding: 2px;
}
.inner-box {
    width: 100px;
    height: 100px;
    border: 2px solid green;
}

​
Oh woops, I just saw that you requested leaving just a single div. Well, that first solution fits those requirements!