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 :
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?
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;
.
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:
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.
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;