Générateur de border-radius
Réglez chaque coin et copiez le CSS.
- Fonctionne dans votre navigateur — votre texte n'est jamais envoyé nulle part
- Sans inscription, sans quota, gratuit et utilisable aussi souvent que vous le souhaitez
Comment ça marche
border-radius est simple jusqu'à ce qu'on veuille trois coins arrondis et un carré, moment où tout le monde doit aller chercher l'ordre des quatre valeurs.
L'ordre, une bonne fois pour toutes
Haut gauche, haut droit, bas droit, bas gauche, soit dans le sens horaire à partir du haut gauche. Le même ordre, dans le sens horaire à partir du haut gauche, s'applique aussi aux notations abrégées de margin, padding et border, ce qui vaut la peine d'être retenu une fois pour toutes.
Pixels ou pourcentage
Les pixels donnent la même courbure quelle que soit la taille de l'élément. Les pourcentages sont relatifs à la largeur et à la hauteur propres de l'élément, donc la courbure s'adapte, et un rayon de 50% sur un carré donne un cercle parfait, ce qui est l'astuce habituelle pour les avatars ronds.
La forme en pilule
Un rayon supérieur à la moitié de la hauteur de l'élément est ramené à exactement la moitié, ce qui explique que border-radius: 999px produise de façon fiable une pilule quelle que soit la hauteur. C'est plus robuste que de calculer la bonne valeur, car cela continue de fonctionner quand le contenu change.
Quand les coins paraissent faux sur des éléments imbriqués
Une boîte arrondie à l'intérieur d'une autre boîte arrondie demande un rayon plus petit pour celle de l'intérieur, réduit de la valeur du padding qui les sépare, sinon les courbes ne seront pas concentriques. C'est un petit détail qui donne aux cartes un aspect vraiment soigné.
Générateur de border-radius : questions
Dans quel ordre sont les quatre valeurs§?
Haut gauche, haut droit, bas droit, bas gauche, soit dans le sens horaire à partir du haut gauche.
Comment faire un cercle parfait§?
border-radius: 50% sur un élément exactement carré.
Comment faire un bouton en forme de pilule§?
Utilisez une grande valeur comme 999px. Les navigateurs la ramènent à la moitié de la hauteur, donc cela fonctionne à toutes les tailles.
Dois-je utiliser des pixels ou des pourcentages§?
Des pixels pour une courbure constante§; des pourcentages si vous voulez qu'elle s'adapte à l'élément.
Est-ce que cela fonctionne partout§?
Oui. border-radius est pris en charge sans préfixe depuis bien plus de dix ans.