JSFiddle - React, Tailwind, and code Playground

HTML

<div class="semioval">
    <div>Привет, мир!</div>
</div>

CSS

.semioval {
    margin: 100px auto;
    width: 60%;
    overflow: hidden;
}

.semioval::before {
    height: 25px;
    width: 120%;
    margin: 0 -10% -18px;
    content: '';
    display: block;    
    background: red;
    height: 25px;
    border-radius: 50% 50% 0 0/25px 25px 0 0;
}

.semioval > div {
    margin: 7px 0 0;
    padding: 20px; 
    background: red;  
}