Css: Outline-offset Alternative For Ie?

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

Solution 1:

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

HTML:

<divclass="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:

<divclass="outer-box"><divclass="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!

Solution 2:

Some more solutions. I've used them successfully:

1.

.box {
outline:2px solid green;
border:2px solid transparent;
box-shadow: 0002px red inset;
}

Restriction of this solution: "outline" property ignores "border-radius" one.

2.

.box {
border: 2px solid green;
box-shadow: 0002px#fff inset, 0004px red inset;
}

Restriction of this solution: space between red and green borders can't be transparent because red box-shadow will be visible through it. So, any solid color needed, I've set #fff.

Solution 3:

My issues with other solutions toward this end:

"outline-offset" is not compatible with IE; pseudoelements method requires absolute positioning and pixel ratios (no good for my responsive design); inset box-shadow does not display over an image.

Here is the fix I used to responsively frame images in an IE compatible way:

.containerimg { 
        border:2px solid white;
        outline:4px solid red;
        background-color: green;
        padding: 2px;
}

"outline" defines the outer border, "border" defines the space in between, while the inner border is actually the background color with padding determining its width.

Solution 4:

In cases where you're styling the ::focus pseudo-class, you won't have the luxury of using ::after or ::before pseudo-class as those methods are only effective on container elements(see W3C spec. for more information).

A cross-browser solution to give-off that offsetting effect is to use box-sizing, border, and padding.

You simply negate and alternate the padding and border width values.

Default / base styles:

input[type="text"] {
  ...
  padding:10px;
  border:1px solid grey;
}

Pseudo-class styles:

input[type="text"]:focus {
  padding:8px;
  border:3px solid red;
}