Это просто фоновая картинка

#main {
margin: 40px;
height: 100px;
background-color: #1abc9c;
position: relative;
overflow: hidden;
}

#main .edge {
position: absolute;
}

#main .edge.top {
top: 0;
left: 10px;
right: 10px;
bottom: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

#main .edge.left {
left: 0;
top: 10px;
bottom: 10px;
right: 0;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#main .corner {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #FFF;
border: 1px solid #000;
}

#main .corner.top { top: -10px; }
#main .corner.bottom { bottom: -10px; }
#main .corner.left { left: -10px; }
#main .corner.right { right: -10px; }



<div id="main">
<div class="edge top"></div>
<div class="edge left"></div>
<div class="corner top left"></div>
<div class="corner top right"></div>
<div class="corner bottom left"></div>
<div class="corner bottom right"></div>
</div>


________
посл. ред. 03.08.2018 в 12:29; всего 1 раз(а); by exWhor

<div id="main">
<div class="edge top"></div>
<div class="edge left"></div>
<div class="corner top left"></div>
<div class="corner top right"></div>
<div class="corner bottom left"></div>
<div class="corner bottom right"></div>
</div>
________
посл. ред. 03.08.2018 в 12:29; всего 2 раз(а); by EagleX

Картинку нашел, а гуглить не научился? https://ru.stackoverflow.com/questions/582912/Как-скругли�...обводкой