JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rect"><span id="circle"><span id="innercircle"></span></span></div>

CSS

#rect{
    width:100px;
    height:100px;
    background:rgba(255,0,0,0.5);
    margin-top:50px;
    margin-left:50px;
    position:relative;
}
#circle{
    width:100px;
    height:50px;
    position:absolute;
    top:100px;
    display:block;
    overflow:hidden;
    background:transparent;
}
#innercircle{
    width:100px;
    height:100px;
    position:absolute;
    -webkit-border-radius:100px;
background:transparent;
    border:40px solid rgba(255,0,0,0.5);
    left:-40px;
    top:-40px;
    content:'';
}
body{
    background:rgba(255,255,0,0.5);
}