Here is a method to create convex borders for a box through CSS with no extra element. Check out HTML and CSS in the tabs below.
Demo
Open demo in a full window – https://demos.webdevpuneet.com/css/convex-borders/index.html
HTML
<div class="box">
This is some text
</div>
CSS
<style>
.box {
width: 400px;
height: 200px;
background-color: #ccc;
border:3px solid red;
border-radius: 0 0 0 0;
position: relative;
margin-left:30px;
border-left:0px;
border-right:0px;
font-weight:bold;
font-size:30px;
text-align:center;
padding:30px;
box-sizing:border-box;
padding-top:70px;
}
.box::before {
border:3px solid red;
height: 200px;
width: 20px;
border-radius: 100% 0% 0% 100%;
content: '';
position: absolute;
top: -3px;
left: -20px;
border-right:0px;
background-color: #ccc;
box-sizing:border-box;
}
.box::after{
border:3px solid red;
height: 200px;
width: 20px;
border-radius: 0% 100% 100% 0%;
content: '';
position: absolute;
top: -3px;
right: -20px;
border-left:0px;
background-color: #ccc;
box-sizing:border-box;
}
</style>