JSFiddle - React, Tailwind, and code Playground

by create_1

HTML

<div class="container">
    <div class="shape"></div>
    <div class="circle"></div>
</div>

CSS

body{
    background: red;
}
.container {
    width: 320px;
height: 220px;
position: relative;
}
.shape {
   width: 320px;
   height: 220px;
   background-color: transparent;
   background-image: -webkit-radial-gradient(50% 0, circle, transparent 50px, black 0);
   background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
   margin-top: 50px;
}
.circle {
 width: 100px;
 height: 100px;
 background-color: transparent;
 border: 2px solid blue;
 border-radius: 50px;
 position: absolute;
 top: -52px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 align-items: center;
 justify-content: center;
}