Border-radius w procentach (%) i pikselach (px) lub em

Jeśli użyję wartości piksela lub em dla border-radius, promień krawędzi jest zawsze łukiem kołowym lub kształtem pigułki, nawet jeśli wartość jest większa niż największy bok elementu.

Kiedy używam procentów , promień krawędzi jest eliptyczny i zaczyna się na środku każdej strony elementu, co daje kształt owalu lub elipsy :

Wartość piksela dla 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>

Wartość procentowa border-radius:

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>

Dlaczego border radius w procentach nie działa tak samo, jak border-radius ustawiony z wartościami pikseli lub em?

Border-radius:

Po pierwsze, musisz zrozumieć, że właściwość border-radius przyjmuje 2 wartości. Te wartości to promienie na osi X / Y ćwiartki elipsy określającej kształt narożnika.
Jeśli ustawiona jest tylko jedna z wartości, druga wartość jest równa pierwszej. Więc border-radius: xjest równoważne border-radius:x/x;.

Wartości procentowe

Odnosząc się do specyfikacji W3C: CSS Backgrounds and Borders Module Level 3 border-radius, oto, co możemy przeczytać o wartościach procentowych:

Procenty: patrz odpowiedni wymiar ramki granicznej.

Więc border-radius:50%;definiuje raddi elipsy w ten sposób:

• promienie na osi X stanowią 50% szerokości kontenerów
• promienie na osi Y stanowią 50% wysokości kontenerów

Piksel i inne jednostki

Użycie jednej wartości innej niż procent dla promienia obramowania (em, in, jednostki związane z rzutnią, cm ...) zawsze da w wyniku elipsę o takich samych promieniach X / Y. Innymi słowy, koło .

Po ustawieniu border-radius:999px;promienie okręgu powinny wynosić 999px. Ale inna zasada jest stosowana, gdy krzywe zachodzą na siebie, zmniejszając promienie koła do połowy rozmiaru najmniejszego boku. W twoim przykładzie jest to równe połowie wysokości elementu: 50 pikseli.

W tym przykładzie (z elementem o stałym rozmiarze) możesz uzyskać ten sam wynik zarówno w pikselach, jak i procentach. Ponieważ element jest 230px x 100px, border-radius: 50%;jest równa border-radius:115px/50px;50% (po obu stronach)

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>

Po prostu podziel pierwszą wartość przez żądany% ... więc jeśli chcesz, aby border-radius wynosił 50%, napisz:

border-radius: 25%/50%; 

lub inny przykład:

border-radius: 15%/30%;

Możesz łatwo wykonać matematykę w js lub SASS.