Rayon de bordure en pourcentage (%) et en pixels (px) ou em

Si j’utilise un pixel ou une valeur em pour le rayon de la bordure, le rayon du bord est toujours un arc de cercle ou une forme de pilier, même si la valeur est supérieure au plus grand côté de l’élément.

Lorsque j’utilise des pourcentages , le rayon de l’arête est elliptique et commence au milieu de chaque côté de l’élément, ce qui donne une forme ovale ou ellipse :

rayon de pixel (px)pourcentage (%) rayon de bordure

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; } 
 
border-radius:999px;

Valeur en pourcentage du rayon de bordure:

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

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

Rayon 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

Reportez-vous aux spécifications du W3C: Arrière- plans et frontières CSS Module Niveau 3 border-radius, propriété 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 cette façon:

  • le rayon sur l’ axe des abscisses correspond à 50% de la largeur des conteneurs
  • le rayon sur l’ axe Y est de 50% de la hauteur des conteneurs

Rayon de bordure en pourcentage (%) fait des points de suspension

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 le border-radius:999px; les rayons du cercle doivent être 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.

Rayon de bordure en pixels (px) forme une forme de pilule


Pour cet exemple (avec un élément de taille fixe), vous pouvez obtenir le même résultat avec px et pourcentages. L’élément étant 230px x 100px , border-radius: 50%; est équivalent au border-radius:115px/50px; de 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; } 
 
border-radius:50%;
border-radius:115px/50px;