Générateur de border-radius visuel

À propos de cet outil

Ce générateur règle l'arrondi des coins d'un élément avec un aperçu en direct. En mode simple, chaque coin reçoit un rayon ; en mode elliptique, chaque coin a un rayon horizontal et un rayon vertical distincts (la syntaxe à 8 valeurs séparées par une barre oblique), ce qui permet des formes organiques, des gouttes ou des feuilles. Passez des pixels aux pourcentages, ajustez la taille de l'aperçu pour voir l'effet sur différents formats, générez une forme organique aléatoire et copiez le code CSS, écrit dans sa forme abrégée la plus courte.

Comment utiliser cet outil

1. Choisissez le mode : 4 coins simples ou formes elliptiques à 8 valeurs, et l'unité (pixels ou pourcentage).
2. Réglez chaque coin avec son curseur, ou liez les quatre coins pour qu'ils gardent la même valeur.
3. Faites varier la largeur et la hauteur de l'aperçu pour voir comment les pourcentages s'adaptent à la taille.
4. Partez d'un exemple (pilule, bulle, goutte, feuille…) ou générez une forme organique, puis copiez la ligne border-radius.

La syntaxe de border-radius : de une à huit valeurs

La propriété border-radius arrondit les coins de la boîte d'un élément. C'est un raccourci qui accepte de une à quatre valeurs, attribuées aux coins dans le sens des aiguilles d'une montre à partir du haut gauche :

Chaque coin est en réalité un quart d'ellipse, avec un rayon horizontal et un rayon vertical. La barre oblique permet de les distinguer : border-radius: horizontaux / verticaux, chaque côté acceptant de une à quatre valeurs. L'exemple de MDN, 4px 3px 6px / 2px 4px, donne au coin haut gauche un rayon de 4 px horizontalement et 2 px verticalement, au coin haut droit 3 px et 4 px, et ainsi de suite. C'est la syntaxe à huit valeurs du mode « formes elliptiques » de l'outil, qui permet les gouttes, les feuilles et les formes organiques. L'outil écrit toujours la forme la plus courte : 24px plutôt que 24px 24px 24px 24px, et aucune barre oblique quand tous les coins sont circulaires.

Chaque coin possède aussi sa propriété longue (border-top-left-radius, etc.), utile pour ne surcharger qu'un seul coin sans réécrire le raccourci.

Pixels ou pourcentages ?

• En pixels (ou en rem), le rayon est absolu : 16px donne le même arrondi sur une petite vignette ou sur une grande carte. C'est le choix des composants d'interface (boutons, cartes, champs), pour qu'ils gardent un style uniforme quelle que soit leur taille.
• En pourcentage, les rayons horizontaux se calculent par rapport à la largeur de la boîte, les verticaux par rapport à sa hauteur. 50% donne un cercle sur un carré et une ellipse sur un rectangle ; c'est donc la valeur des avatars ronds et des formes organiques qui doivent s'adapter à leur conteneur. Sur une boîte non carrée, un pourcentage identique produit un rayon horizontal différent du rayon vertical, d'où l'aperçu redimensionnable de l'outil.
• En rem, l'arrondi suit la taille du texte : il grandit avec un texte agrandi, ce qui garde les proportions d'un bouton.

La réduction automatique : pourquoi 999 px donne une pilule

Que se passe-t-il si les rayons de deux coins voisins dépassent ensemble la longueur du côté qui les relie ? Les courbes se chevaucheraient. La spécification CSS prévoit une règle simple : le navigateur calcule, pour chaque côté, le rapport entre la longueur du côté et la somme des deux rayons ; si le plus petit de ces rapports est inférieur à 1, tous les rayons de la boîte sont multipliés par ce rapport. Les proportions de la forme sont conservées, mais l'arrondi est réduit au maximum possible.

Cette même règle explique que votre arrondi paraisse parfois plus faible que la valeur saisie. Pour une forme organique qui se referme proprement sans réduction, faites en sorte que les deux rayons horizontaux d'un même côté totalisent 100 % (par exemple 30 % et 70 %), de même pour les rayons verticaux : c'est ce que fait le bouton « Forme organique aléatoire » de l'outil.

Bonnes pratiques de design

• Choisissez peu de rayons et réutilisez-les. Un système de design s'appuie typiquement sur trois ou quatre valeurs (petit, moyen, grand, complet). Ce site, par exemple, repose sur trois rayons : 8 px pour les petits éléments, 16 px pour les cartes et 28 px pour les grands panneaux. Une interface où chaque élément a son propre arrondi paraît désordonnée.
• Imbriquez avec des rayons concentriques. Quand un élément arrondi en contient un autre séparé par une marge, le rayon intérieur doit valoir le rayon extérieur moins la marge : une carte de 16 px de rayon et de 8 px de marge interne contient une image arrondie à 8 px. Sinon, l'espace entre les deux courbes paraît irrégulier dans les angles.
• Un avatar rond se fait avec un élément carré (aspect-ratio: 1), l'image en object-fit: cover et border-radius: 50%.
• Pour couper un contenu qui dépasse selon l'arrondi (une image dans une carte, par exemple), ajoutez overflow: hidden à l'élément arrondi. Pour des découpes plus complexes (hexagone, étoile), utilisez clip-path.
• Arrondissez aussi l'ombre. box-shadow épouse l'arrondi de la boîte : vérifiez l'effet avec le générateur d'ombres.

Animer un arrondi : formes qui se déforment

border-radius est animable : on peut passer en douceur d'une forme à une autre, d'un carré à un cercle ou d'un blob à un autre. Une animation « organique » consiste à alterner entre deux ou trois jeux de huit valeurs.

.blob {
  width: 220px;
  height: 180px;
  background: #c67139;
  border-radius: 30% 70% 70% 30% / 30% 60% 40% 70%;
  animation: morph 8s ease-in-out infinite alternate;
}
@keyframes morph {
  to { border-radius: 60% 40% 35% 65% / 40% 30% 70% 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

La dernière règle respecte les personnes qui ont demandé à leur système de réduire les animations (vertige, troubles vestibulaires) : désactivez toujours les mouvements décoratifs dans ce cas. Les deux valeurs de la démonstration sont les exemples « Forme organique 1 et 2 » de l'outil.

Questions fréquentes