any border blank space trick ? for CSS

Question

I need some trick to insert border blank space by using CSS like this..

I using CSS box-shadow like this

 box-shadow:
        -1px 0px 0px 0px #000,
        0px -1px 0px 0px #000,
        0px 1px 0px 0px #000,
        1px 1px 0px 0px #000

I have no idea how to make border / shadow look like the picture.

I will use only one html element.. <div></div>

Any trick ?

Playground : http://jsfiddle.net/ES66k/

Answer 1

with one div only: http://jsfiddle.net/ES66k/1/ (tested on Fx18 and chrome)

div {
  width:300px;
  height:170px;
  margin:100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  position: relative;
}

div:after, div:before {
   content: "";
   position: absolute;
   top: -1px;
   width: 20px;
   height: 172px;
   border-top: 40px white solid;
   border-bottom: 40px white solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }

It's bit hacky, anyway, since it's relying on a fixed height and on a solid color as background (white) but maybe could be useful for your purpose.