Div border in this form: blank gaps in the corners

Question

How to accomplish this div border using css:

I tried using dashed border but leads to this:
http://jsfiddle.net/23qGr/

div {width: 20px; 
height: 20px; border: 6px #6a817d dashed; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;
}

Answer 1

You could use pseudo element and transparent/black borders : DEMO

div {
    width: 20px;
    height: 20px;
    padding:6px;
    position:relative;
}
div:before , div:after {
    content:'';
    border:6px solid transparent;
    position:absolute;
}
div:before {
    left:2px;
    right:2px;
    top:0;
    bottom:0;
    border-top-color:black;
    border-bottom-color:black;
}
div:after {
    top:2px;
    bottom:2px;
    left:0;
    right:0;
    border-right-color:black;
    border-left-color:black;
}

If you increse border-width, it looks better : demo