Creating inverted border radius and box-shadow together

Issue

I want to create an inverted border radius similar to:

However, it is being hard to create it due to the box-shadow. I have tried many solutions, such use box-shadow inset, or the filter drop-shadow with clip-path without good results.

I am on this point:

body {
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: white;
}

.wrapper {
  width: 100%;
  //filter: drop-shadow(0 0 2rem #0000005c);
}

.header {
   background-color: #efefef;
   width: 85%;
   aspect-ratio: 16/3;
   border-radius: 1.5rem;
   border: 1px solid #d0d0d0;
   box-shadow: 0 0 2rem #0000005c;
  position: relative;
  margin: 0 auto;
  //clip-path: url(#myClip);
}

.dashed {
    width: 100%;
    position: absolute;
    top: 50%;
    border-bottom: 1px dashed black;
}

  
  .dashed:after {
    content: '';
    position: absolute;
    width: 8rem;
    height: 4rem;
    background: white;
    left: -7rem;
    top: -2rem;
    border-radius: 0 2rem 2rem 0;
    box-shadow: 0 0 2rem #0000005c inset;
    clip-path: inset(0 0 0 80%);
  }

<div class="wrapper">
  <div class="header">
    <div class="dashed"></div>
  </div>
</div>

<!--
<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
        <circle cx="50" cy="50" r="50" />
<rect width = "10000" height = "10000"
    </clipPath>
  </defs>
</svg>
-->

I have tried using a svg with multiple clip-path to reference it on the css as well.

Original full image:

Solution

You can use a reduced code considering gradient coloration:

body {
  background: silver
}

.dashed {
  width: 90%;
  height: 200px;
  margin: 50px auto;
  min-width: 250px;
  background: 
    radial-gradient(50px at left , #0000 98%, #fff) left, 
    radial-gradient(50px at right, #0000 98%, #fff) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 2rem black);
}

<div class="dashed"></div>

Answered By - Temani Afif