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

Question

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

Lorsque j'utilise percentages, le rayon de la bordure est elliptique et commence au milieu de chaque côté de l'élément, ce qui donne une forme ovale ou ellipse:

Valeur de pixel pour 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>

Valeur en pourcentage pour le rayon de la bordure:

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 pourcentage de rayon de bordure ne fonctionne-t-il pas de la même manière que le paramètre de rayon de bordure défini avec les valeurs pixel ou em?

Answer 1

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 est équivalent à border-radius:x/x;. 

Valeurs en pourcentage

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

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

Donc border-radius:50%; définit le raddi de l'ellipse de la manière suivante:

• les rayons sur l'axe X représentent 50% des conteneurs largeur
• les rayons sur l'axe Y représentent 50% des conteneurs hauteur

Pixel et autres unités

Utiliser 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;, le rayon du cercle doit être de 999px. 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 px et pourcentages. Comme l'élément est 230px x 100px, border-radius: 50%; est équivalent à 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>

Answer 2

Divisez simplement la première valeur par le% que vous voulez. Si vous voulez un rayon 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.

Answer 3

Pas une réponse réelle à la question, mais un conseil d'utilisation pour tous ceux qui pourraient tomber dessus: 

Si vous souhaitez utiliser une unité relative mais ne souhaitez pas le comportement elliptique de %, vous pouvez toujours utiliser em ou rem. Par exemple. border-readius: 1em;