This question already has an answer here:
I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this:
If I use
border-radius: 50%;, which makes corders fully round, I get this:
The effect I need can be achieved by providing some random large number to
border-radius and this is what I did:
Is there any better way, which doesn't involve fake numbers?
Best How To :
Just use a huge number, e.g.
margin: 0 10px;
<div class="horizontal box"></div>
<div class="vertical box"></div>
It works because, according to the spec,
Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.