user1117313 user1117313 - 28 days ago 5
CSS Question

CSS: Set border to half width

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

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

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

.box{
    width:500px;
}

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

http://jsfiddle.net/MuAKF/

Comments