Curved shadows in CSS - html

Question

Is it possible to do curved shadows? I've currently got this design where it's an inset shadow on an element but it has curves, some on the element however, so aren't on the element (the inversed ones)
What i've currently got is an element with a border radius on the top-left and bottom-left and then I using a before and after block with a background radial-gradient to create the effect however, it begins to look stupid when I apply the shadows. Any ideas of what I can do to try and achieve the effect in the image below?
Example image of what I mean:
body { display: flex; justify-content: center; align-items: center; height: 100vh;}
.container {
background: red;
width: 200px;
height: 200px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.block {
width: 160px;
height: 140px;
background: white;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
}
.block:after,
.block:before {
content: "";
position: absolute;
right: 0;
width: 20px;
height: 20px;
background: blue;
}
.block:before {
background: radial-gradient(circle at top left, red 0%, red 75%, white 75%, white 100%);
top: -20px;
}
.block:after {
background: radial-gradient(circle at bottom left, red 0%, red 75%, white 75%, white 100%);
bottom: -20px;
}
<div class="container">
<div class="block">
<p style="font-size: 54px; text-align: center; marign: 0;">👋</p>
</div>
</div>