CSS Border height different on each side -


i wondering if border possible in pure css? there no content within box, image within future.

possible?

i achieve in pure css, no jquery. have looked around , seems isn't possible, css evolving wondering if possible apart using nested divs etc.

cheers!

you can fake it. 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; } 

Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -