HTML CSS: граница с необычными углами

Question

Я знаю, как сделать двойную границу. Но как сделать такие углы?

пример границы

Answer 1

Вот решение с чистым CSS и одним элементом:

.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

Решение : http://jsfiddle.net/w4ho0eqk/27/

Существует множество способов создания такого рода двойных границ. Вы можете создать что-то подобное с помощью свойства border-image CSS или вручную с помощью пользовательских линий SVG и окружностей. В этом случае я использовал фиксированное позиционирование для достижения чего-то похожего на ваш пример.