html - How to add multiple borders in bottom?

Question

I want to add two extra bottom borders in a div so that it looks as attached image:

Do I need to add two additional empty div's for that? I have very basic markup:

<div class="box">
    main div
</div>

Here's the basic demo: http://jsfiddle.net/3TWtF/

Answer 1

Yes, you'll need to add two <div/>s like so: http://jsfiddle.net/UUDd3/ This will provide the most compatible solution.

Add the following HTML:

<div class="box2">
    &nbsp;
</div>
<div class="box3">
    &nbsp;
</div>

And the following CSS:

.box2{
    border-left: 1px solid brown; 
    border-bottom: 1px solid brown; 
    border-right: 1px solid brown; 
    width: 480px;
    height: 10px;
    margin:0 10px;
}
.box3{
    border-left: 1px solid brown; 
    border-bottom: 1px solid brown; 
    border-right: 1px solid brown; 
    width: 460px;
    height: 10px;
    margin:0 20px;
}

Answer 2

You can do it without two extra divs but it will require dropping support for IE7 as you will need to use pseudo-elements.

jsFiddle

.box{
    border: 1px solid brown; 
    width: 500px;
    height: 100px;
    position:relative;
}
.box:after {
    display:block;
    content:"";
    position:absolute;
    border:1px solid brown;
    width:400px;
    left:50px;
    top:100px;
    height:15px;
}
.box:before {
    display:block;
    content:"";
    position:absolute;
    border:1px solid brown;
    width:300px;
    left:100px;
    top:116px;
    height:15px;
}