css установить радиус границы относительно высоты

Question

Насколько я понимаю, в CSS свойство border-radius определяет, как далеко вниз должен начинаться закругленный угол. Расстояние может быть в относительных единицах, таких как %. Однако, если задано значение в процентах CSS, конечно, берется% ширины по оси x и% высоты по оси y. Я хочу, чтобы элемент был полосой с закругленными концами:

div {
    margin: 50px auto;
    border: 1px solid black;
    width: 800px;
    height: 150px;
    border-radius: 75px; /* hardcoded, but would like it to be 50% of height */
}

Соедините это со стандартным html do c только с одним пустым div в теле. В данном случае мне это нужно, высота элемента div также в процентах, поэтому я не могу просто рассчитать его вручную. Как я могу установить радиус границы до 50% высоты по обеим осям? Казалось, я нигде не нашел, чтобы это ни спрашивали, ни делали, так что, может быть, есть действительно очевидный способ сделать это, которого я просто пропускаю?

Answer 1

Это немного обманывает, но вы можете просто установить радиус границы на что-то огромное, и он будет выглядеть одинаково независимо от размера:

div {
    border-radius: 500px;
}

Answer 2

Вы также можете использовать:

border-radius: 50vh;   

Похоже, когда предоставляется более высокое значение radius, работающее для различных значений width и height.

div {
  margin: 50px auto;
  border: 1px solid black;
  width: 400px;
  height: 150px;
  /* hardcoded, but would like it to be 50% of width */
  border-radius: 50vh;
}

<div>

</div>