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

.box {
  --r: 10px;
  width: 200px;
  aspect-ratio: 1;
  margin: 10px;
  display: inline-block;
  background: radial-gradient(var(--r),#0000 98%,#fff)
      calc(-1.5*var(--r)) calc(-1.5*var(--r)) /calc(3*var(--r)) calc(3*var(--r))
}
.one {
  background: radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5*var(--r)) calc(-1.5*var(--r)) /calc(3*var(--r)) calc(3*var(--r))
}
.two {
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5*var(--r)) calc(-1.5*var(--r)) /calc(3*var(--r)) calc(3*var(--r)),
    linear-gradient(#fff 0 0)  no-repeat
      50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
}

body {
  background: pink;
 
}