change height of right border

css, html

Solution

You can use a pseudo element to replace the right border. As you can choose the size/position of it you can simulate a border with it :

FIDDLE

HTML :

<div></div>

CSS :

div {
    height:200px;
    width:500px;
    background:gold;
    position:relative;
    border-top:10px solid grey;
    border-bottom:2px solid #000;
}
div:after {
    content:"";
    position:absolute;
    top:20%;
    right:0;
    width:2px;
    height:60%;
    background:#000;
}

Supports IE8 see caniuse

Problem

My right border is 100% height: ``` border-right:1px solid #000000; ``` I'd like to make it shorter: Is it achievable using CSS without changing the height of the div? I need div to be 100% height and only change that border.

Original source

Related problems