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 m

Answer 1

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.

Answer 2

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 3

2018: For modern browsers:

You can use border-image with gradients something like...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;

Demo: https://jsfiddle.net/hz8wp0L0/

Tool: Gradient Editor

Can I Use : border-image (IE11)

Answer 4

For those trying to implement Aleksandr Belugin's answer above using border-left, here it is:

.mybox {
  position: relative;
  padding: 10px 20px;
  background-color: #EEEEEE;
}

.mybox:after {
  content: '';
  position: absolute;
  left: 0px;
  top: 25%;
  height: 50%;
  border-left: 1px solid #0000CC;
}

<div class="mybox">
  Le content de box.
</div>

Answer 5

You can use:

line-height:50%; /*(or less, much less)*/
overflow:visible;

The text is visible, but the border color will be only at half of the div size.