<div class="round"></div>
.round {
  width: 100px;
  height: 100px;
  margin: 15px auto;
  background: 
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0) 14px, #c00 15px) top left,
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0) 14px, #c00 15px) top right,
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0) 14px, #c00 15px) bottom right,
    radial-gradient(circle at 0 100%, rgba(255, 255, 255, 0) 14px, #c00 15px) bottom left;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

body {
  margin: 0;
  background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.