Div border in this form: blank gaps in the corners

border, css, html

Solution

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

Problem

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; } ```

Original source

Related problems