Semi-rounded rectangle with css

Question

I was wondering if is there's a way to do the following rectangle's borders with border-radius or any other property, take a look at what i need:

And so far this is what I have got using border-radius :

The rectangle at top was created with Wix, the other one is made with CSS and HTML. As you can see the borders as so different.

Is there a way to accomplish it?

Answer 1

This is possible as you can define each corner within the border radius value, which will then give you the shape you want, see below for a simple example and you can read more on how this works on https://www.w3schools.com/cssref/css3_pr_border-radius.asp

 #rcorners { border-radius: 4em / 2em; background: #73AD21; padding: 20px; width: 200px; height: 150px; }

 <div id="rcorners">Rounded corners!</div>

Answer 2

Try something like this, you want border-radius: x/y where x is the higher value for the corner your looking for

 .test { margin: auto; width: 400px; height: 100px; background-color: blue; border-radius: 30%/10%; }

 <div class="test"> </div>

Answer 3

You can handle the horizontal and the vertical radius by : border-radius: 50px/20px;

Look at this example :

 div.example { background-color: #6495ED; padding: 20px; margin-top: 10px; margin-right: 20px; text-align: center; border-radius: 50px/20px; }

 <div class="example">Lorem Ipsum.</div>