Subtle curve on bottom of div

user_1793688 0
Viewed 790

I am trying to achieve a subtle curve at the bottom of my <div>

Here is an example image of what i am trying to achieve

enter image description here

I tried to achieve it by doing this :

section.box{
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;
}

This is what I'm getting.

enter image description here

What can i do to change this?

UPDATE

What I have tried :

.box{
  height: 300px;
  background-color: white;
}

.round-bottom{
  background-color: pink;
  height: 200px;
  
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
<div class="box">
  <section class="round-bottom">
      
  </section>
</div>

sass css html
3 Answers

I have personally achieved this result by extending the image beyond the edge of the screen like this:

.curved {
    border-bottom-left-radius: 95% 65%;
    border-bottom-right-radius: 95% 65%;
}
.full-width {
    min-width: 150%;
    display: flex;
    margin-left: -25vw;
    margin-right: -25vw;
    justify-content: center;
}
user_174158980
Related