html - 这种形式的div边框: blank gaps in the corners

Question

如何使用css完成这个div边框:

我尝试使用虚线边框，但结果是这样的:
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

您可以使用伪元素和透明/黑色边框: 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;
}

如果增加边框宽度，它看起来会更好:demo