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

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

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

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

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>

Процентное значение для радиуса границы:

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

<div>border-radius:50%;</div>

Почему радиус границы в процентах не действует так же, как радиус границы, установленный с помощью значений пикселей или em?

Граница-радиус:

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

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

Ссылаясь на спецификации W3C: CSS Backgrounds and Borders Module Level 3, border-radius вот что мы можем прочитать о процентных значениях:

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

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

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

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

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

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

В этом примере (с элементом фиксированного размера) вы можете получить тот же результат как с пикселями, так и с процентами. Как элемент 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>

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

border-radius: 25%/50%; 

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

border-radius: 15%/30%;

Вы можете легко выполнять математические вычисления в js или SASS.