Bordure-rayon en pourcentage (%) et pixels (px) ou em

Si j'utilise une valeur pixel ou em pour border-radius, le rayon du bord est toujours un arc circulaire ou une forme de pilule même si la valeur est supérieure au plus grand côté de l'élément.

Lorsque j'utilise des pourcentages , le rayon du bord est elliptique et commence au milieu de chaque côté de l'élément, ce qui donne une forme ovale ou elliptique :

Valeur de pixel pour le rayon de la bordure:

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>

Valeur en pourcentage pour 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>

Pourquoi le rayon de bordure en pourcentages n'agit-il pas de la même manière que le rayon de bordure défini avec des valeurs de pixel ou em?

Rayon de la frontière:

Tout d'abord, vous devez comprendre que la propriété border-radius prend 2 valeurs. Ces valeurs sont les rayons sur l'axe X / Y d'un quart d'ellipse définissant la forme du coin.
Si une seule des valeurs est définie, la deuxième valeur est égale à la première. Donc border-radius: xéquivaut à border-radius:x/x;.

Valeurs pourcentages

En se référant aux spécifications du W3C: propriété border-radius du module Arrière- plans et bordures CSS, voici ce que nous pouvons lire concernant les valeurs de pourcentage:

Pourcentages: reportez-vous à la dimension correspondante de la zone de bordure.

Ainsi border-radius:50%;définit le raddi de l'ellipse de cette façon:

• les rayons sur l' axe X correspondent à 50% de la largeur des conteneurs
• les rayons sur l' axe Y correspondent à 50% de la hauteur des conteneurs

Pixel et autres unités

L'utilisation d' une valeur autre qu'un pourcentage pour le rayon de la bordure (em, in, unités liées à la fenêtre, cm ...) donnera toujours une ellipse avec les mêmes rayons X / Y. En d'autres termes, un cercle .

Lorsque vous définissez border-radius:999px;les rayons du cercle doivent être de 999 px. Mais une autre règle est appliquée lorsque les courbes se chevauchent, réduisant les rayons du cercle à la moitié de la taille du plus petit côté. Donc, dans votre exemple, il est égal à la moitié de la hauteur de l'élément: 50px.

Pour cet exemple (avec un élément de taille fixe), vous pouvez obtenir le même résultat avec à la fois px et pourcentages. Tel que l'élément est 230px x 100px, border-radius: 50%;équivaut à border-radius:115px/50px;(50% des deux côtés):

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>

Divisez simplement la première valeur par le% que vous voulez .. donc si vous voulez un rayon de bordure de 50%, écrivez:

border-radius: 25%/50%; 

ou un autre exemple:

border-radius: 15%/30%;

Vous pouvez facilement faire le calcul en js ou SASS.