css border-left 50% height
A sort-of similar but different approach to @Pekka's: use the :after
pseudo-selector, like so:
.mybox {
position: relative;
padding: 10px 20px;
background-color: #EEEEEE;
}
.mybox:after {
content: '';
position: absolute;
bottom: 0px;
left: 25%;
width: 50%;
border-bottom: 1px solid #0000CC;
}
<div class="mybox">
Le content de box.
</div>
...and a jsFiddle for good measure.
Good question. It's not possible using the border property.
The only thing that comes to mind, if you can set your div's position
to relative
, is to use an absolutely positioned, 1 pixel wide div
. Not thoroughly tested but this should work:
<div style='width: 1px; top: 0px; bottom: 50%; left: 0px;
background-color: blue; overflow: hidden'>
</div>
You'd do the same on the right hand side, replacing the left
property by right
.
Remember, the surrounding div
needs to be position: relative
for this to work. I'm not sure about whether the 50% height setting will work consistently throughout browsers - make sure you test it. You may have to resort to pixel measures if it doesn't.