<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%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.