CSS: Rounded effect

Question

I would like to make this effect rounded with CSS.

But, I'm only able to do this effect:

This is the code:

How can I do this effect and being responsive?

Answer 1

Just change px for %: border-radius: 0px 0px 50% 500%;:

body {
  height: 100vh;
  width: 100%;
}

#oval {
  position: relative;
  width: 100%;
  height: 100px;
  background: #ffffff;
  border-radius: 0px 0px 50% 500%;
}

<div style="width: 100%; height: 100px; background-color: #30393b">
  <div id="oval" />
</div>
<div style="width: 100%; height: 100px; background-color: #30393b" />