#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>