CSS Border height different on each side - css

Question

I am wondering if a border like this would be possible in pure css? There will be no content within this box, only an image within the future.
I would like to achieve this in pure CSS, with no jQuery. I have looked around and it seems it isn't really possible, however with CSS constantly evolving I was wondering if it was possible apart from using nested divs etc.
Cheers!

Answer 1

You can fake it. Like this jsFiddle example.
HTML
<div id="wrapper">
<div id="top"></div>
<div id="bottom"></div>
<img src="http://www.placekitten.com/200/100" />
</div>
CSS
#top, #bottom {
width: 200px;
height:50px;
position:absolute;
left:-1px;
}
#bottom {
border-left: 1px solid #f00;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
bottom:0;
}
#top {
border-left: 1px solid #f00;
top:0;
}
#wrapper {
position:relative;
width: 200px;
height:100px;
background: #faa;
}

Answer 2

You can do it with only one div if you use pseudo elements. jsFiddle here
HTML:
<div id="wrapper">
<img src="http://www.placekitten.com/200/100" />
</div>
CSS:
#wrapper {
position:relative;
width: 200px;
height:100px;
background: #faa;
border-left: 1px solid #f00;
border-bottom: 1px solid #f00;
}
#wrapper::before {
content: " ";
position: absolute;
width: 100%;
height: 50%;
bottom: -1px;
right: -1px;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
}

Answer 3

Just for the 'think' of it, you could also just stick a small graphic at the bottom right of a div (as a background image) and use a border on the left and bottom. Still just manipulating it via css with one small graphic but at least the height and width would be dynamic and not stuck as if using a full image.
Would also avoid A LOT of extra mark-up and css. 1 div, 1 css declaration and 1 small image.