CSS Border Radius issue [duplicate] - css

Question

This question already has answers here:
Is a CSS Arch using border-radius possible?
(5 answers)
Closed 6 years ago.
Can anyone explain me how make a rounded border div like
this image?
I tried but the result is not the same: the left and right side curves should be less hard.
Here it is my code snippet:
.cnt {
margin: 0 auto;
border: 1px solid grey;
width: 300px;
height: 150px;
position: relative;
background-color: #4a4d84;
}
.t {
position: absolute;
width: 100%;
height: 50px;
background-color: red;
bottom: 0;
}
.t::before {
content: "";
position: absolute;
width: 100%;
height: 70px;
top:-30px;
background-color: red;
border-radius: 50% 50% 0 0;
}
<div class="cnt">
<div class="t">
</div>
</div>
Can you help me?

Answer 1

You want the circle to be round and much wider than the parent, yet at the same or a similar aspect ratio, hide the overflow, and you can do it with a single element.
div {
width: 400px;
height: 300px;
background: blue;
position: relative;
overflow: hidden;
}
div:after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translateX(-50%);
background: red;
height: 300%; width: 400%;
border-radius: 50%;
}
<div></div>

Answer 2

Increasing .ts width to 200% and having a larger border radius does the trick. You can now alter its height to adjust the curve.
.cnt {
margin: 0 auto;
border: 1px solid grey;
width: 300px;
height: 150px;
position: relative;
background-color: #4a4d84;
overflow: hidden;
}
.t {
position: absolute;
width: 200%;
height: 200px; /* Change this to adjust the curvature. */
top: 40%;
left: -50%;
background-color: red;
border-radius: 200%;
}
<div class="cnt">
<div class="t">
</div>
</div>

Answer 3

you can increase the width (as advised in other answers) of your pseudo and use a box-shadow to paint the upper part of the box:
div:before {
content:'';
position:absolute;
top:3em;
left:-5%;
right:-5%;
bottom:0;
box-shadow:0 0 0 8em turquoise;
border-radius:100% 100% 0 0%;
pointer-events : none; /* remove it from the way */
}
div {
box-sizing:border-box;
position:relative;
width:300px;
margin:auto;
border:solid;
font-size:20px;
padding:5em 1em 1em;
background:tomato;
color:white;
text-align:center;
font-variant:small-caps;
overflow:hidden;
}
<div>
Some text here
</div>

Answer 4

Another approach to use background-image:
.main {
width: 300px;
height: 200px;
position: relative;
/*
140% is x-axis,
50% is y-axis,
at 50% is x-position
90% is y-position
*/
background-image: radial-gradient(140% 50% at 50% 90% , #1F8698 0%, #1F8698 50%, #1DC0D6 50%, #1DC0D6 100%)
}
.main::after
{
content: "Text Here";
position: absolute;
bottom: 10%;
width: 100%;
text-align: center;
font-size: 25px;
color: white;
}
<div class='main'></div>