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


124

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 :

rayon de bordure de pixel (px)pour cent (%) border-radius

Valeur de pixel pour le rayon de la bordure:

Valeur en pourcentage pour border-radius:

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?

Réponses:


181

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

Bordure-rayon en pourcentage (%) faire une ellipse

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.

Le rayon de la 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 à 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>


6
Excellente réponse. Il est dommage que les valeurs de rayon en pourcentage soient calculées séparément pour la largeur et la hauteur. Cela signifie que je ne peux pas obtenir de coins circulaires qui s'adaptent à la taille de l'objet, sans connaître le rapport hauteur / largeur de l'objet. Ne serait-il pas intéressant que le pourcentage soit appliqué à la plus grande des dimensions des objets?
Chris Dennis

4
@ChrisDennis Ce n'est pas vrai. Comme OP l'a dit, vous pouvez simplement utiliser border-radius: 999px;. De cette façon, vous obtenez vos coins circulaires et assurez-vous qu'ils s'adaptent à votre élément
Gust van de Wal

9
Mais je ne veux peut-être pas des extrémités semi-circulaires dans la boîte. J'aimerais pouvoir spécifier le rayon x comme, disons, 10% de la largeur de la boîte et le rayon y égal au rayon x.
Chris Dennis

4
Hé, avez-vous fait un autre message auto-répondu comme celui-ci? J'apprécierais de les lire.
Ced

3
Mais ce qui fonctionne réellement avec le pourcentage est: border-radius: 50%/100%(Testé dans Chrome 60 + 61)
denns

6

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.


1
N'est-ce pas seulement 25% de la largeur et 50% de la hauteur? Ce n'est pas la même chose que 50% de la hauteur dans les deux directions X et Y.
mpen

c'est quoi cette syntaxe! Ça marche! Je n'ai jamais su que ça existait, c'est sympa!
Uri Kutner

C'est juste math bro
CyberJ

1
Je ne sais pas quel genre de maths vous faites, mais ce n'est pas «juste des maths». C'est un raccourci spécialement défini pour border-radius qui n'a rien à voir avec la division arithmétique. w3.org/TR/css-backgrounds-3/#border-radius
MI Wright
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.