You can create a concaved radius using the box-shadow property.
-
This technique creates a transparant square with overflow hidden.
-
It then creates a transparant circle with a box shadow.
-
We then adjust the position of the circle to only view 1 quarter of
it.
SNIPPET
#box {
position: relative;
width: 200px;
height: 50px;
background-color: blue;
border-radius: 9999px 0 0 9999px;
margin: 30px;
text-align: center;
color: #fff;
padding-top: 10px;
}
#top,
#bottom {
position: absolute;
height: 30px;
width: 30px;
right: 0;
overflow: hidden;
}
#top {
top: -30px;
}
#bottom {
bottom: -30px;
}
#top::before,
#bottom::before {
content: '';
position: absolute;
right: 0;
height: 200%;
width: 200%;
border-radius: 100%;
box-shadow: 10px 10px 5px 100px blue;
z-index: -1;
}
#top::before {
top: -100%;
}<div id="box">
<div id="top"></div>
#box
<div id="bottom"></div>
</div>