Пограничный радиус в процентах (%) и пикселях (px) или em

Если для граничного радиуса я использую значение пикселя или em, радиус края всегда является дугой окружности или формой талии если значение больше наибольшей стороны элемента.

Когда я использую проценты, радиус края эллиптический и начинается в середине каждой стороны элемента, что приводит к овальной или эллиптической форме:

Значение пикселя для радиуса границы:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

Ответ 1

Граничный радиус:

Во-первых, вам нужно понять, что свойство border-radius принимает 2 значения. Эти значения представляют собой радиусы на оси X/Y четвертого эллипса, определяющие форму угла.
Если задано только одно из значений, второе значение равно первому. Таким образом, border-radius: x эквивалентен border-radius:x/x; ,

Значения процентов

Ссылаясь на спецификации W3C: CSS-фон и границы уровня 3-го уровня с граничным радиусом, это то, что мы можем прочитать относительно процентных значений:

Проценты: см. Соответствующий размер поля рамки.

Таким образом, border-radius:50%; определяет raddi эллипса таким образом:

радиусы на оси X составляют 50% ширины контейнеров
радиусы по оси Y составляют 50% высоты контейнеров

Пиксель и другие единицы

Использование одного значения, отличного от процента радиуса границы (em, in, связанных с видовым экраном, cm...), всегда будет приводить к эллипсу с теми же радиусами X/Y. Другими словами, круг.

Когда вы устанавливаете border-radius:999px; радиусы круга должны быть 999px. Но другое правило применяется, когда кривые перекрываются, уменьшая радиусы круга до половины размера самой маленькой стороны. Таким образом, в вашем примере он равен половине высоты элемента: 50 пикселей.

В этом примере (с элементом фиксированного размера) вы можете получить тот же результат с обоими px и процентами. Поскольку элемент равен 230px x 100px, border-radius: 50%; эквивалентно border-radius:115px/50px; (50% обеих сторон):

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

Ответ 2

Просто разделите первое значение на%, который вы хотите.. поэтому, если вы хотите, чтобы радиус границы составлял 50%, напишите:

border-radius: 25%/50%;

или другой пример:

border-radius: 15%/30%;

Вы можете легко сделать математику в JS или SASS.

Ответ 3

Не фактический ответ на вопрос, а совет по юзабилити для тех, кто может наткнуться на него:

Если вы хотите использовать относительную единицу, но не хотите использовать эллиптическое поведение %, вы всегда можете использовать em или rem. Например. border-radius: 1em;