CODEWITHSUNDEEP
css
Daphne
Daphne

Reputation: 1747

Is it possible to create double borders in CSS?

I'm trying to rely on CSS to create a double border for a navigation menu bar where there is a double border on top and a double border at the bottom. I'd also like for the two lines to have 1px shadows to create an embedded look.

enter image description here

How do I do this using CSS?

Upvotes: 0

Views: 2001

Answers (2)

sandeep
sandeep

Reputation: 92803

You can use :after property for this. write like this:

CSS

div{
    height:30px;
    position:relative;
    border-top:1px solid green;
    border-bottom:1px solid green;
    margin:10px;
}
div:after{
    content:'';
    position:absolute;
    top:-3px;
    bottom:-3px;
    left:0;
    right:0;
    border-top:1px solid green;
    border-bottom:1px solid green;
}

HTML

<div></div>

Check this http://jsfiddle.net/ECFBR/8/

Upvotes: 1

Starx
Starx

Reputation: 78981

Whats wrong with?

border-top: 3px #000 double;
border-bottom: 3px #000 double;

Upvotes: 0

Related Questions