CSS - rounded background

Question

Is that possible in CSS?

If yes, how to do this? I tried with border-top-left-radius but its not the same.

Answer 1

You can get pretty close setting the length and the percentage for border-*-*-radius.

div {
  width: 100%;
  height: 200px;
  background-color: red;
  border-top-left-radius: 50% 20px;
  border-top-right-radius: 50% 20px;
}

Here's a quick demo: https://jsfiddle.net/crswll/wqsebkpz/1/

and one with an image as proof that it works: https://jsfiddle.net/crswll/wqsebkpz/2/

You can find more details here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Formal_syntax