css border-radius 怎么保持水平半径等于垂直半径

Question

现在有一个矩形框,高度小于宽度

   .half {

      border: 10px solid black;

      height: 200px;

      width: 400px;

      margin-left: 900px;

      border-radius: 55px;

      background: yellow;

    }

现在设置的是固定高度,垂直半径和水平半径都是55px,可以得到我要的效果,垂直方向上有一段110px长度的固定高度不参与倒圆角
但是现在这个矩形高度变为可变化的,而border-radius支持百分数,但是百分数相对的是边框的长度,水平半径相对的是水平边框的长度,垂直半径相对的是垂直边框的长度,使用calc(50% - 55px)，这样水平半径是不等于垂直半径的
现在的做法是使用js设置，能不能通过css也可以实现这个效果

Answer 1

border-radius: 50%;