title: Circle over a rectangle using CSS
body: <p>I want to design a shape as similar as the following image(effect between circle and rectangle):</p>
  <p><a href="https://i.stack.imgur.com/eOLwb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eOLwb.png" alt="enter image description here" /></a></p>
  <p>I know the circle shape is designed using <strong>border-radius</strong> and the rectangle-like shape is designed with some unordered list having style <strong>display: block</strong>. 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).</p>
  <p>I have tried box-shadow, outline, overflow and etc, but it is not working.<br />
  Can anyone tell me how can I design it like it is in the below image?</p>