css border-left 50% height

Question

I want the left border of my div to show only to the half of the div. The same I would like to do to my right border but is should be set from the bottom of the div to the middle of the div. How can I achieve it?

Answer 1

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.

Answer 2

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.