CODEWITHSUNDEEP
css
learnjourney
learnjourney

Reputation: 653

CSS Double Border with outer border thicker than inner border

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.

Upvotes: 29

Views: 68960

Answers (5)

Aadit Gupta
Aadit Gupta

Reputation: 1

HTML CODE

<div id='border'>Your Text</div>

CSS CODE

#border{
    border: 2px solid blue;
    box-shadow: 0 0 0 5px green;

Upvotes: 0

Elliot Peter
Elliot Peter

Reputation: 31

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

Upvotes: 3

bnabilos
bnabilos

Reputation: 2334

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

Upvotes: 59

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

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.

Upvotes: 1

casablanca
casablanca

Reputation: 70721

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)

Upvotes: 7

Related Questions