Add a circle in the middle of a rectangle

Question

I need to draw this image with CSS only:

I have achieved this:

The problem is removing the box shadow on that particular place. I've tried to cut the circle with a clip-path, but the box shadow still appears.

.box {
    width: 50%;
    min-height: 100px;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4);
    position: relative;
    border-radius: 10px;
    z-index: 0;
    padding: 12px;
    margin-bottom: 4px;
}


.box::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    border-radius: 50%;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4);
    transform: translateX(-50%);
    background-color: white;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
    border-top: 0;
    clip-path: inset(0px -10px -10px -10px);
}

.box::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4); /* Your desired box shadow */
    transform: translateX(-50%);
    background-color: white;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border-bottom: 0;
    clip-path: inset(0px -10px -10px -10px);
}

.box::before {
    top: -1.1px;
    left: 50%;
}

.box::after {
    bottom: -1px;
    left: 50%;
}

<div class="box">
  Content
</div>

Fiddle: https://jsfiddle.net/pL9n8g2u/

Thanks in advance

Answer 1

Use radial-gradient combined with drop-shadow filter:

.box {
  --r: 20px; /* control the radius */

  margin: 50px;
  height: 200px;
  
  border-radius: var(--r);
  background: radial-gradient(var(--r) at 50% var(--r),#0000 98%,#fff) 0 calc(-1*var(--r));
  filter: drop-shadow(0 0 3px #000);
}

<div class="box"></div>