How to keep horizontal Radius equal to Vertical Radius in css border-radius

there is now a rectangular box with a height less than the width

   .half {
      border: 10px solid black;
      height: 200px;
      width: 400px;
      margin-left: 900px;
      border-radius: 55px;
      background: yellow;
    }

now the fixed height is set. Both the vertical radius and the horizontal radius are 55px. You can get the effect I want. The fixed height of a section of 110px length in the vertical direction does not participate in the fillet
but now the height of the rectangle becomes variable, while the border-radius supports the percentage, but the percentage is relative to the length of the border, the horizontal radius is relative to the length of the horizontal border, and the vertical radius is relative to the length of the vertical border. Using calc (50%-55px), In this way, the horizontal radius is not equal to the vertical radius
. The current practice is to use the js setting, and this effect can also be achieved through css

.
Mar.01,2021

when using border-radius to define a fillet, if the fillet is a positive arc, you only need to specify one set of values; if the fillet is an elliptical arc, you need to specify two sets of values, the first group of values for the long axis (that is, the horizontal axis of the box) and the second group of values for the short axis (that is, the vertical axis of the box).

by setting the minor axis smaller, you can reduce the Radian in the vertical direction.

.half {
  border: 10px solid black;
  height: 200px;
  width: 400px;
  border-radius: 25% / 10%;
  background: yellow;
}

reference:
fillet generator on codepen
https://codepen.io/pmk/full/z.


border-radius: 50%;

Menu