CSS Border height different on each side -
i wondering if border possible in pure css? there no content within box, image within future.
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
Post a Comment