CSS Double Border with outer border thicker than inner border

Question

In my current work I\'m required to produce a double border on a container. The border-style: double; achieve this, however my client want the outer border to be thicker &am

Answer 1

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)

Answer 2

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;
}

Answer 3

You can also use the :before pseudo-element like this:

https://stackoverflow.com/a/11179169/1468708

So that you can have a double border with different thickness just at the bottom, for example.

Answer 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.

Answer 5

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.