JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="left-borders"></div>
    <div class="right-borders"></div>
    <div class="content">
        Hello there ;)
    </div>
</div>

CSS

.box{
    background:#04cdcd;
    width: 200px;
    height: 100px;
    display: table;
    position: relative;
}
.content{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    color:#fff;
}

.left-borders:before{
    width: 50px;
	height: 50px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
    display: block;
    content:' ';
    position:absolute;
    left:-25px;
    top:-25px;
}
.left-borders:after{
    width: 50px;
	height: 50px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
    display: block;
    content:' ';
    position:absolute;
    left:-25px;
    bottom:-25px;
}
.right-borders:before{
    width: 50px;
	height: 50px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
    display: block;
    content:' ';
    position:absolute;
    right:-25px;
    top:-25px;
}
.right-borders:after{
    width: 50px;
	height: 50px;
	background: #fff;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
    display: block;
    content:' ';
    position:absolute;
    right:-25px;
    bottom:-25px;
}