HTML rectangle box with flatter border at bottom

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: