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

.box {
  --size: 50px;
  --p: 25px;
  --R: 55.9px /*sqrt(var(--size)*var(--size) + var(--p)*var(--p))*/;
  
  height: 400px;
  margin: 10px 0;
  
  
-webkit-mask:
  radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)),#000 99%,#0000 101%) 
   left calc(50% - 2*var(--size)) bottom 0/calc(4*var(--size)) 51% repeat-x,
  radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),#0000 99%,#000 101%) 
   left 50% bottom var(--size)/calc(4*var(--size)) calc(51% - var(--size)) repeat-x,
  radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)),#000 99%,#0000 101%) 
   left calc(50% - 2*var(--size)) top 0/calc(4*var(--size)) 51% repeat-x,
  radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),#0000 99%,#000 101%) 
   left 50% top var(--size)/calc(4*var(--size)) calc(51% - var(--size)) repeat-x;
  background:linear-gradient(90deg,red,blue);  
  border: none;
}

.box + .box {
  --d: bottom;
}