How does this become a square instead of a circle?

[htmlcssjavascript28]

How do I change this image to be a square?

Edit fiddle - JSFiddle - Code Playground

.curtain:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: blue;
-webkit-mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
}

 

[EkBass]

You ment something like this?

.curtain:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*background: blue;*/
  -webkit-mask-image: radial-gradient(circle farthest-side, transparent 0% 50%, black 50%); /* 50% value makes it a square */
  mask-image: radial-gradient(circle farthest-side, transparent 0% 50%, black 50%);
}