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 & the inner border to be of the normal thickness.

Other than creating 2 divs, 1 nested inside another with the outer div having a larger thickness, or through the use of border images is there any way I can do it with CSS with just 1 div? specifying border-style: double; and still be able to make the outer border thicker.

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