I want to design a shape as similar as the following image(effect between circle and rectangle):

[![enter image description here](https://i.stack.imgur.com/eOLwb.png)](https://i.stack.imgur.com/eOLwb.png)

I know the circle shape is designed using **border-radius** and the rectangle-like shape is designed with some unordered list having style **display: block**. But I can't understand how to keep the circle over the rectangle so that it looks like that some portion of the rectangle is cut down by the circle in a circle shape ( white color space between circle and rectangle).

I have tried box-shadow, outline, overflow and etc, but it is not working.  

Can anyone tell me how can I design it like it is in the below image?