Comment fonctionne border-radius
Chaque coin est un quart d’ellipse. Avec une seule valeur, comme border-radius: 24px, l’ellipse est un
cercle de 24 px de rayon et les quatre coins sont identiques. Avec quatre valeurs, elles se répartissent dans le sens
des aiguilles d’une montre en partant du coin supérieur gauche : haut-gauche haut-droit bas-droit bas-gauche.
S’il en manque, elles sont copiées du coin opposé, comme pour margin : c’est pourquoi 0 120px
donne une feuille.
La syntaxe à huit valeurs et les formes organiques
Après la barre oblique viennent les rayons verticaux : border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%.
Chaque coin cesse alors d’être un arc de cercle et devient un arc d’ellipse à deux rayons différents : c’est ainsi que
les sites modernes créent leurs blobs sans la moindre image ni SVG. Le mode « Forme libre » travaille toujours
en pourcentages, pour que la forme se conserve même si la taille de l’élément change.
px ou % : lequel utiliser
- px pour les boutons, les cartes et les champs : l’arrondi reste le même quelle que soit la taille.
- 50 % pour les cercles (sur un carré) et les ellipses (sur un rectangle).
- Une valeur énorme, comme
999px, pour les pilules : le navigateur la limite à la moitié du petit côté et les extrémités restent parfaitement rondes, quelle que soit la largeur.
Arrondir des images
border-radius découpe aussi le contenu d’une <img> : cela suffit pour des avatars ronds
(border-radius: 50% sur une image carrée). Si l’élément a des enfants qui dépassent des coins, ajoutez
overflow: hidden. L’aperçu utilise une image du générateur ximg.es, que vous pouvez
demander à la taille exacte de votre maquette :
<img src="https://ximg.es/160x160" style="border-radius: 50%" alt="">