<div class="y"> </div>
<div class="w"> </div>
body {
  background:red;
}

.y,.w {
  width:500px;
  height:500px;
  background:white;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50px),#fff 0); 
   position:absolute;
  left:0;
  right:0;
  top:0;
    bottom:10px;
}


.w {
  background:blue;
  width:600px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.