Not using the native border-radius
. As mentioned on MDN “Negative values are invalid”. You could definitely look for a library out there which does this for you automatically (though I find the approach taken in Philip’s suggested library to be particularly outdated).
Using pure CSS I have come up with an approach. The idea is to add 4 extra elements inside your container, set their background to the same color as your page background (so this will not let page content underneath filter through – for that, you’d need SVG masking or similar), and to position
them in such a way that they lie just outside of the element itself. We then apply a border-radius
which gives the affect:
#main {
margin: 40px;
height: 100px;
background-color: #004C80;
position: relative;
overflow: hidden;
}
#main div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #FFF;
}
.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }
<div id="main">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>