JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bantik"></div>

CSS

div {
	margin: 80px 30px 30px 30px;
	border: 3px solid red;
	width: 95px;
	height: 45px;
	position: relative;
}

div:before, div:after {
	display: block;
	width:45px;
	height:25px;
	position: absolute;
	content: "";
	border: 3px solid red;
	top: -35px;
}

div:before {
	left: -3px;
    left: -3px;
    -webkit-border-radius: 200px;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius: 200px;
    -moz-border-radius-bottom-right: 0;
    border-radius: 200px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 370px;
}

div:after {
	    right: -3px;
    -webkit-border-radius: 200px;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius: 200px;
    -moz-border-radius-bottomright: 0;
    border-radius: 200px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 370px;
}