CODEWITHSUNDEEP
csscolorsborder
Vince
Vince

Reputation: 2646

Is it possible to give one element two different borders?

I'm looked this up and all i couldn't find the answer i was looking for at all. I have multiple divs on my webpage, and they all have a black border of 1px solid black all around. Except for two divs with the certain ids. they have a different color border that is 10 px, but I would like to surround that with a border of 1px solid black. Any suggestions? All my divs are javascript created.

Upvotes: 2

Views: 535

Answers (2)

amit mishra
amit mishra

Reputation: 64

Not exactly double border but you can give border as will as box-shadow which can give you desired effect.

Upvotes: 0

Charlie Gorichanaz
Charlie Gorichanaz

Reputation: 1204

The only method reliable in all browsers is using an extra DIV container and applying a border to that as well as the inner DIV.

Some other methods that work in many browsers are detailed by Louis Lazaris at http://www.impressivewebs.com/multiple-borders-css/

Lazaris's methods in brief

Border and Outline

Support: Everything but IE6/7
Note: outline doesn’t affect flow of elements around it, so it will overlap or underlap other elements.

.one {  
    border: solid 6px #fff;  
    outline: solid 6px #888;      
}

Pseudo Element

Note: min-height keeps it vertically fluid.

.two {  
    border: solid 6px #fff;  
    position: relative;  
    z-index: 1;  
}  

.two:before {  
    content: "";  
    display: block;  
    position: absolute;  
    top: -12px;  
    left: -12px;  
    border: solid 6px #888;  
    width: 312px;  
    padding-bottom: 12px;  
    min-height: 100%;  
    z-index: 10;  
}

Box Shadow

Note: box-shadow also doesn't affect flow of elements around it.

I’m using two shadows (comma separated) and I’ve set the offset and blur settings to zero, while giving each shadow an appropriate size. Because one overlaps the other, the second shadow is twice the size of the other. The key parts are the lack of blur and a fully opaque color. This gives each shadow a straight edge, just like a border.

.three {  
    box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;  
}

Extra <div>

Support: All browsers

.four {  
    border: solid 6px #888;  
    background: #fff;  
    width: 312px;  
    min-height: 312px;  
}  

.four div {  
    width: 300px;  
    min-height: 300px;  
    background: #222;  
    margin: 6px auto;  
    overflow: hidden;  
}

Border Image

.five {  
    border-width: 12px;  
    -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;  
    -moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;  
    border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */  
}

Upvotes: 4

Related Questions