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

div {
  width:300px;
  height:170px;
  margin:100px;
  position:relative;

 background:#ccc;

}

div:before, div:after {
 content:"";
 position:absolute;
 top:0;
 left:0;
}
div:before {
    width:280px; /*****-20px*****/
    height:168px; /*****-2px*****/

    margin-left:10px;
    border-top:1px solid #f00;
    border-bottom:1px solid #f00;
}
div:after {
    width:298px; /*****-2px*****/
    height:150px; /*****-20px*****/

    margin-top:10px;
    border-left:1px solid #f00;
    border-right:1px solid #f00;
}

Demo : http://jsfiddle.net/ES66k/4/

Done now, Don’t need to set background-color 😀

But thanks @Fabrizio Calderan anyway 😀