How to make this shape with border radius?

Issue

I have trouble reproducing this shape using the border-radius:

Right now I obtain this:

Here is my css code (it's inside a grid):

 .container-11-1 {
    grid-column: 1;
    grid-row: 1 / 3;
    background: #e4cab6;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    margin-bottom: 30px; //otherwise the bottom stick to the section below and it's even worse
}

Solution

You could just change the percent to pixels or rem or other units. See if this fits your requirement - https://codepen.io/alstonchan/pen/eYevKZq.

border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
/*or*/
border-bottom-left-radius: 160px;
border-bottom-right-radius: 160px;

Answered By - Alston Chan