How are blocks with complex cuts made?

Question

css

I ran into a problem with layout of a block with a cutout so that this block still has a shadow, and not along a rectangular outline, but along the outline of the cutout. As well as the shadow of the round element. I laid out the top and bottom block, and on top of them I put the third (round). But there are problems:
1. Not all corners of the border-radius turned out to be rounded
2. I can’t apply a shadow to the top and bottom blocks, it does not follow the contour of the figure.
Here is how it should be:

And here how I did

Tell me, please, how such issues are resolved?

Answer 1

on SVG, you can make a cutout even in the shape of a kitten

Answer 2

https://jsfiddle.net/z6jm5L3h/
partial solution (without rounding inner corners)

Answer 3

https://developer.mozilla.org/en/docs/Web/CSS/clip-path