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

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

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 3

A sort-of similar but different approach to @Pekka's: use the :after pseudo-selector, like so:

HTML Markup:

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

CSS:

.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;
}

...and a jsFiddle for good measure.

Answer 4

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.