body { background: #fff; } .box { background: #b2b2b2; height: 60px; width: 210px; margin: 25px; padding: 20px; position: relative; overflow: hidden; } .box:before { content: ""; display: block; background: #fff; position: absolute; top: -9px; left: -9px; width: 20px; height: 20px; border-radius: 20px; } .box:after{ content: ""; display: block; background: #fff; position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 20px; } .box p { color: #fafafa; } .box .boxBtm:before { content: ""; display: block; background: #fff; position: absolute; bottom: -9px; left: -9px; width: 20px; height: 20px; border-radius: 20px; } .box .boxBtm:after{ content: ""; display: block; background: #fff; position: absolute; bottom: -9px; right: -9px; width: 20px; height: 20px; border-radius: 20px; }
<div class="box"><p class="boxBtm">Some text in the box</p></div>