I was trying to apply border-radius on a div, and I notice that border-radius will only work on one side if this side's radius value gets too big like below. How exactly can I solve this while keeping the border-radius value on both sides?

.wrapper1 {
  width: 250px;
  height: 150px;
  background-color: red;
  border-radius: 999px 2px 2px 999px;
}
.wrapper2{
  width: 250px;
  height: 150px;
  background-color: green;
  border-radius: 2px;
}

<div >&nbsp;</div>
<div >&nbsp;</div>

CodePudding user response：

From the specification:

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.

So yes, a border-radius on one corner affect adjacent corners. If you want to have accurate detail, check the specification to find all the formula and geometry behind border-radius

Here is a more trivial example:

.wrapper1 {
  width: 250px;
  height: 150px;
  background-color: red;
  border-radius: 9999px 100px 100px 9999px;
}
.wrapper2{
  width: 250px;
  height: 150px;
  background-color: green;
  border-radius: 100px;
}

<div >&nbsp;</div>
<div >&nbsp;</div>

CodePudding user response：

Swap the values from PX to EM and it should work as intended:

border-radius: 9em 0.2em 0.2em 9em;