HTML rectangle box with flatter border at bottom [duplicate]

Question

I want to create a box in html where the bottom is round but not a circle. I know i can add border radius bottom, see https://jsfiddle.net/cxo8usyL/

#square_1 {
  width: 100px;
  height: 250px;
  background: gold;
  border-radius: 0px 0px 50px 50px;
}

But the circle at the bottom will turn round every time. Is there a trick to make the circle flatter like in the blue one below? Current implementation (see jsfiddle in yellow), my target is in blue.

Target:

Answer 1

You can use elliptical border radius to achieve "round flat" effect. But since you cannot use it for just top/bottom corners, you'd need to combine it with another rectangle on one side. example solution: border-radius: 60px / 10px;

https://css-tricks.com/almanac/properties/b/border-radius/