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