Question

Consider following:

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

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
}

It will set the bottom border of full width of the box (500px).
But instead of setting the border bottom to whole width, I’d like to set 300px, in the middle of the box bottom, how should I do that..

Answer 1

Can you throw an <hr> at the bottom of your box?

<div class="box">
    ...
    <hr>
</div>

.box{
    width:500px;
}

.box hr{
    width: 300px;
    border-bottom: 1px solid #ccc;
}

http://jsfiddle.net/MuAKF/