Try this it’s working in all devices
.main{
overflow: hidden;
}
.bg {
width:80vw;
height:40vw;
border-bottom-left-radius: 80vw;
border-bottom-right-radius: 80vw;
background-color: lightgray;
}<div class="main">
<div class="bg"></div>
</div>You can use an svg to make things easier. There is the circle element which you can include that always draws perfect circles. Place it so that only the bottom half shows and you’ve got a half circle.
Example:
svg {
width: 98vw;
height: 98vw;
}<svg viewbox="0 0 100 100">
<circle cx="50" cy="0" r="50" fill="grey" />
</svg>.halfCircle{
height:45px;
width:90px;
border-radius: 90px 90px 0 0;
background:green;
}
<div class="halfCircle"></div>
the bellow link has all the shape
https://paulund.co.uk/how-to-create-different-shapes-in-cssAs per as you have told your requirements in your comment, I have this.
.main {
/*overflow: hidden;*/
}
.bg {
width: 400px;
height: 500px;
/*Have reduced the width and height just for the sake of simplicity. It's completely up to you */
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
background-color: lightgray;
margin-top: -130px;
}<div class="main">
<div class="bg"></div>
</div>Hope this solves your query.
It is working and looking perfectly .But the width should be twice the height and the border-redious first two parameters equal to height and last parameters should be 0
.halfCircle{
height:400px;
width:800px;
border-radius: 400px 400px 0 0;
background:green;
}
I am trying to put half circle background but radius in bottom not completely coming in circle….
Here is my code i have tried
.main {
overflow: hidden;
}
.bg {
width: 100%;
height: 800px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: lightgray;
margin-top: -130px;
}<div class="main">
<div class="bg"></div>
</div>Do you have an example or image in mind?
I attach my image example …thanks
Do you want a complete half circle or something like a rectangle with circular end (something like a race-track)?
Hi. Stack Overflow is working on a new feature
It’s working good…but what happen when we increase the height and width at that time it’s not looking perfectly….