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

.box {
  display:inline-block;
  width:200px;
  aspect-ratio:1;
  background:linear-gradient(135deg,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
}
.one {
  background:
  linear-gradient(red 0 0) center/calc(100% - 60px) calc(100% - 60px) no-repeat,
  radial-gradient(circle farthest-side,#0000 98%,red) 0 -30px/55.5px 60px round no-repeat,
  radial-gradient(circle farthest-side,#0000 98%,red) 0 calc(100% + 30px)/55.5px 60px round no-repeat,
  radial-gradient(circle farthest-side,#0000 98%,red) -30px 0/60px 55.5px no-repeat round,
  radial-gradient(circle farthest-side,#0000 98%,red) calc(100% + 30px) 0/60px 55.5px no-repeat round,
    blue;
}
.two {
 --mask: 
  linear-gradient(#000 0 0) center/calc(100% - 60px) calc(100% - 60px) no-repeat,
  radial-gradient(circle farthest-side,#0000 98%,#000) 0 -30px/55.5px 60px round no-repeat,
  radial-gradient(circle farthest-side,#0000 98%,#000) 0 calc(100% + 30px)/55.5px 60px round no-repeat,
  radial-gradient(circle farthest-side,#0000 98%,#000) -30px 0/60px 55.5px no-repeat round,
  radial-gradient(circle farthest-side,#0000 98%,#000) calc(100% + 30px) 0/60px 55.5px no-repeat round;
-webkit-mask: var(--mask);
        mask: var(--mask);
}
.fix {
clip-path: polygon(60px 0,calc(100% - 60px) 0,100% 60px,100% calc(100% - 60px),calc(100% - 60px) 100%,60px 100%,0 calc(100% - 60px),0 60px);
}

body {
  background: linear-gradient(90deg,#ddd,#fff);
}