JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="cutout"></div>

CSS

body {
    padding: 50px;
}


.cutout {
    height: 88px;
    width: 88px;
    
    /* the inverse circle "cut" */
    background-image: 
        radial-gradient(circle at 44px 0px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, blue 14px),
        radial-gradient(circle at 0 24px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, red 14px),
        radial-gradient(circle at 44px 24px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, green 14px),
        radial-gradient(circle at 44px 20px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, blue 14px);
    background-size: 88px 20px, 44px 48px, 44px 48px, 88px 20px;
    background-position: 0px 0px, 0px 20px, 44px 20px, 0px 68px;
    background-repeat: no-repeat;
}