JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper" id="c1">
    <div class="content">This shows a circle mask without needing an PNG </div>
</div>
<div class="wrapper" id="c2">
    <div class="content">box number 2 </div>
</div>

CSS

.wrapper {
    width: 300px; height: 300px;
    border-radius: 50%;
    border:5px solid #ccc;
    overflow: hidden;
    position: absolute; 
    -webkit-mask-image:#fff; 
}

.content {
    width: 300px; height: 300px;
    background-color: #fff9e1;
    font-size:20px;
}

#c1{
    left:50px;
    top:50px;
}

#c2{
    left:100px;
    top:100px;
}