CSS Double Border with outer border thicker than inner border

Solution 1:

Outlines are included in the CSS3 specification and allow both a border and an outline to be applied to a single element.

The outline property is identical to the border command. The additional offset property however allows the border to be moved further inside or outside of the element.

I used outlines to give borders 2 different colors, change the code to give your borders 2 different sizes.

#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}

Solution 2:

No, it's not possible. The CSS border width specifies the total thickness of the border, regardless of the border style. I don't see a better way than wrapping it in another DIV.

Edit: You could hack it in using outline, but there is a subtle difference between outline and border.

border: double 4px black;
outline: solid 3px black;

(this will produce a 1px inner and 4px outer "border", if you can call it that)

Solution 3:

Or you could use a border image with that fancy new stuff in CSS3, though it wouldn't be supported in most currently-used browsers.

Solution 4:

#box {
    border: solid 4px #333;
    outline: solid 3px #333;
    outline-offset: -12px;
}

If you don't use the double style on your border you can have more control. This method will give full control of styles for the outer border, the inner outline, and the space between them.