HTML CSS: border with unusual corners

Question

I know how to do a double border. But how to do such corners?

border example

Answer 1

Here is a solution with pure CSS and one element:

.box {
 margin:50px;
 width:200px;
 height:200px;
 border:1px solid #000;
 border-radius: 10px;
 background:
    radial-gradient(circle at center,#000 62%,transparent 65%) 5px 5px/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) calc(100% - 5px) 5px/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) 5px calc(100% - 5px)/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) calc(100% - 5px) calc(100% - 5px)/7px 7px,
    
    linear-gradient(#000,#000) 0 8px/100% 1px,
    linear-gradient(#000,#000) 8px 0/1px 100%,
    linear-gradient(#000,#000) 0 calc(100% - 8px)/100% 1px,
    linear-gradient(#000,#000) calc(100% - 8px) 0/1px 100%;
 background-repeat:no-repeat;
 position:relative;
 z-index:0;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:-8px;
  right:0;
  left:0;
  bottom:-8px;
  background:
    radial-gradient(circle at center,#000 62%,transparent 65%) 5px 5px/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) calc(100% - 5px) 5px/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) 5px calc(100% - 5px)/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) calc(100% - 5px) calc(100% - 5px)/7px 7px;
 background-repeat:no-repeat;
}
.box:after {
  top:0;
  right:-8px;
  left:-8px;
  bottom:0;
}

<div class="box">

</div>

Answer 2

Solution: http://jsfiddle.net/w4ho0eqk/27/

There are multiple way's of creating this kind of double borders. You can create something like that with border-image CSS property, or manual with custom SVG lines and circles. In this case I used fixed positioning to achieve something like your example.