Межі-радіус у відсотках (%) та пікселях (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>

Відсоткове значення для радіуса кордону:

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>

Чому радіус кордону у відсотках не діє так само, як радіус межі, встановлений із значеннями пікселів чи ем?

Межі-радіус:

Спочатку потрібно зрозуміти, що властивість радіус межі приймає 2 значення. Ці значення - радіуси на осі X / Y чверті еліпса, що визначають форму кута.
Якщо встановлено лише одне зі значень, то друге значення дорівнює першому. Так що border-radius: xеквівалентно border-radius:x/x;.

Значення відсотків

Звертаючись до специфікацій W3C: Модуль фонових фонів та границь модуля 3 рівня властивості радіус кордону, це те, що ми можемо прочитати щодо процентних значень:

Відсотки: див. Відповідний розмір поля рамки.

Отже border-radius:50%;визначає raddi еліпса таким чином:

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

Піксельні та інші одиниці

Використання одного значення, відмінного від відсотка для радіуса кордону (em, в, одиниці, пов’язані з оглядом, см ...), завжди призведе до еліпса з однаковими радіусами X / Y. Іншими словами, коло .

При встановленні border-radius:999px;радіусів кола має бути 999 пікс. Але інше правило застосовується, коли криві перекриваються, зменшуючи радіуси кола до половини розміру найменшої сторони. Тож у вашому прикладі вона дорівнює половині висоти елемента: 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>

Просто розділіть перше значення на%, який ви хочете .. тому, якщо ви хочете радіус межі 50%, напишіть:

border-radius: 25%/50%; 

або інший приклад:

border-radius: 15%/30%;

Ви можете легко зробити математику в js або SASS.