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'>
 &nbsp;
</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.

Tags:

Css

Border