Cara, minha humilde sugestão seria usar um `radial-gradient`. No caso, em cada canto de uma `div` filha, você usaria um `radial-gradient` com a mesma cor que você usa no contêiner pai. Assim: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> *{ box-sizing: border-box; } .internal-radius{ background-color: #fff; width: 300px; height: 200px; background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), radial-gradient(circle at left bottom, lightblue 20px, transparent 0), radial-gradient(circle at right top, lightblue 20px, transparent 0), radial-gradient(circle at right bottom, lightblue 20px, transparent 0); width: 100%; } .container{ background-color: lightblue; padding: 15px; } <!-- language: lang-html --> <div class="container"> <div class="internal-radius"></div> </div> <!-- end snippet --> É claro que, ao adicionar um texto dentro da `div` que carrega o `radial-gradient`, o texto vai ficar em cima da "bolinha" do topo. A solução que arrumei foi colocar `padding` na `div.internal-radius` com o mesmo valor de `radial-gradient`, ou seja, `20px`. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> *{ box-sizing: border-box; } .internal-radius{ padding: 20px; background-color: #fff; width: 300px; height: 200px; background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), radial-gradient(circle at left bottom, lightblue 20px, transparent 0), radial-gradient(circle at right top, lightblue 20px, transparent 0), radial-gradient(circle at right bottom, lightblue 20px, transparent 0); width: 100%; } .container{ background-color: lightblue; padding: 15px; } <!-- language: lang-html --> <div class="container"> <div class="internal-radius"> Meu nome é Wallace e eu sou bonito </div> </div> <!-- end snippet --> Honestamente, não é uma das melhores soluções, mas CSS ainda é assim.