Aperçu border-radius

Appliquez border-radius: 50% à un élément carré pour créer un cercle parfait. Définissez les quatre coins à 50%.

Oui, border-radius peut avoir quatre valeurs individuelles dans l'ordre : top-left, top-right, bottom-right, bottom-left. Cela permet des formes asymétriques uniques.

Six à douze pixels pour les boutons et huit à seize pour les cartes conviennent à la plupart des interfaces. Plus que le chiffre exact, c'est la cohérence qui compte : si les boutons et les champs de saisie d'un même écran ont des rayons différents, l'ensemble paraît brouillon. Quand une image se loge dans une carte, donnez à l'élément intérieur un rayon légèrement inférieur à celui de l'extérieur, sinon les deux courbes jureront visiblement.

50 % signifie « la moitié de chaque côté » : dès que l'élément n'est pas carré, les rayons horizontal et vertical diffèrent et vous obtenez une ellipse. Pour un vrai cercle, donnez la même valeur à width et height ou ajoutez aspect-ratio: 1. Pour une forme de gélule sur un bouton dont la largeur suit le libellé, employez une grande valeur fixe comme 9999px plutôt que 50 % : les extrémités resteront de parfaits demi-cercles quelle que soit la hauteur.