Css partial border to create a "placeholder"

Question

Using CSS, how can I create a partial border according to the image below

I can get the full border with:

border: 1px solid #f5f5f5; 

but just want to show maybe 30px at the top and botton of the vertical border where there was nothing?

can this be achieved?

Thanks, as always

Answer 1

There is a CSS solution, but it is complex and also requires HTML markup:

 #box { width: 200px; height: 200px; margin: 30px; position: relative; } #box > div.corner { display: block; position: absolute; width: 50px; height: 50px; } .top { top: 0px; border-top-style: solid; } .bottom { bottom: 0px; border-bottom-style: solid; } .left { left: 0px; border-left-style: solid; } .right { right: 0px; border-right-style: solid; } 

 <div id="box"> <div class="corner top left"></div> <div class="corner top right"></div> <div class="content">content</div> <div class="corner bottom left"></div> <div class="corner bottom right"></div> </div> 

Demo