Q:

More rounded corner - Border Radius CSS

I'm looking to do more rounded corners in CSS to have a result like this :

Currently, I have this code:
border-radius: 0 400px 0 0;

which results in:

The second value doesn't change the corner even if I put 50px or 1000px.
Is there a way to have a similar border radius?

A:

You would need to elongate your border-radius:

.test {
  border: 1px solid black;
  text-align:center;
  
  /* border-top-left-radius: horizontal vertical */
  border-top-left-radius: 50px 20px;
}
<div class="test">
  lorem ipsum
</div>

More information

