Générateur CSS de border-radius, gratuit

Comprendre la propriété raccourcie border-radius

La propriété CSS border-radius est définie dans le module CSS Backgrounds and Borders de niveau 3 du W3C. Sa forme raccourcie accepte jusqu'à quatre valeurs pour les coins circulaires et jusqu'à huit (séparées par une barre oblique) pour les coins elliptiques. L'ordre des coins est fixe : haut-gauche, haut-droite, bas-droite, bas-gauche, dans le sens horaire à partir du haut-gauche, exactement comme vous liriez un cadran d'horloge. La spécification est sans ambiguïté : « Si le coin bas-gauche est omis, il prend la même valeur que le coin haut-droite. Si le coin bas-droite est omis, il prend la même valeur que le coin haut-gauche. Si le coin haut-droite est omis, il prend la même valeur que le coin haut-gauche. »

Les quatre propriétés individuelles par coin vous permettent de cibler un seul coin sans écrire les autres : border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Chacune accepte une valeur (un coin circulaire) ou deux valeurs (un coin elliptique x y).

Pixels, pourcentages et l'astuce des 50 %

La spécification du W3C définit la façon dont les pourcentages sont résolus : « Les pourcentages pour le rayon horizontal se rapportent à la largeur de la boîte de bordure, tandis que les pourcentages pour le rayon vertical se rapportent à la hauteur de la boîte de bordure. » Cela entraîne une conséquence importante : border-radius: 50% crée un cercle parfait uniquement lorsque l'élément est carré. Sur un rectangle de 200×100, 50 % sur chaque coin produit une ellipse : un rayon horizontal de 100 px (la moitié de la largeur) et un rayon vertical de 50 px (la moitié de la hauteur).

Quand utiliser quelle unité :

• Pixels (px) : des coins précis et fixes qui ne s'adaptent pas à l'élément. Idéal pour les boutons, les cartes et les composants d'interface cohérents.
• Pourcentages (%) : s'adaptent à l'élément. Utilisez 50 % pour des cercles ou des ellipses sur des composants à taille variable.
• em / rem : s'adaptent à la taille de police. Utile pour les boutons dont le rayon de coin doit croître avec le texte qu'ils contiennent.
• calc() : mélangez les unités, p. ex. calc(8px + 0.5em) pour une base qui s'adapte subtilement à la taille du texte.

L'astuce de la pilule

Définir un border-radius supérieur à la moitié du plus petit côté de l'élément force chaque coin à devenir un véritable demi-cercle, produisant une forme de pilule quelle que soit la largeur. La convention est border-radius: 9999px, soit n'importe quel nombre assez grand pour qu'aucun élément réaliste ne le dépasse jamais. C'est pourquoi la classe .rounded-pill de Bootstrap utilise 50rem (~800 px) et rounded-full de Tailwind v4 se résout en calc(infinity * 1px) : les deux encodent la même idée, à savoir qu'un nombre plus grand que la boîte garantit une pilule sur n'importe quel élément.

Coins elliptiques et formes blob organiques

La forme à huit valeurs (avec barre oblique) est celle que les designers utilisent pour créer des formes « blob » organiques et asymétriques, devenues populaires pour les illustrations d'en-tête et les arrière-plans décoratifs. Chaque coin reçoit un rayon horizontal différent avant la barre oblique et un rayon vertical différent après, produisant des courbes qui ne sont pas limitées à des arcs de cercle.

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Variantes en propriétés logiques pour les mises en page RTL

Le module CSS Logical Properties de niveau 1 introduit quatre propriétés logiques individuelles qui s'adaptent au sens d'écriture :

• border-start-start-radius : haut-gauche en LTR (anglais), haut-droite en RTL (arabe / hébreu).
• border-start-end-radius : haut-droite en LTR, haut-gauche en RTL.
• border-end-start-radius : bas-gauche en LTR, bas-droite en RTL.
• border-end-end-radius : bas-droite en LTR, bas-gauche en RTL.

Utile lorsque le même composant doit paraître symétrique dans les deux sens de lecture : le coin « bouche » d'une bulle de discussion, par exemple, devrait toujours se trouver du côté de celui qui parle, et non toujours à gauche. Notez qu'il n'existe pas encore de forme raccourcie en propriétés logiques, vous devez donc écrire les quatre propriétés individuelles séparément pour activer des coins adaptés au RTL.

Bord extérieur ou intérieur lorsque la bordure est épaisse

Le rayon s'applique au bord extérieur de la bordure. Le navigateur calcule automatiquement un rayon concentrique plus petit pour le bord intérieur afin que la bordure ne paraisse pas discontinue au coin. Conséquence pratique : un rayon extérieur de 16 px avec une bordure de 2 px aura un rayon intérieur d'environ 14 px, de sorte que la bordure ressemble à un cadre d'épaisseur constante tout du long. Définissez background-clip: padding-box si vous voulez que la couleur d'arrière-plan s'arrête au bord intérieur de la bordure au lieu de déborder en dessous.

Conventions de dimensionnement pratiques

Erreurs fréquentes

1. Utiliser 50 % sur un élément non carré en s'attendant à un cercle. 50 % sur un rectangle donne une ellipse. Gardez l'élément carré, ou utilisez border-radius: 9999px pour une vraie pilule.
2. Oublier l'ordre des coins. La forme raccourcie va dans le sens horaire à partir du haut-gauche (HG HD BD BG). La forme à deux valeurs définit des paires diagonalement opposées, ce qui est facile à confondre.
3. Valeurs négatives. La spécification les définit comme invalides ; le navigateur les ramène silencieusement à zéro. Si un coin ne s'arrondit pas comme prévu, vérifiez que vous n'avez pas soustrait par accident.
4. Des parents arrondis qui laissent dépasser leurs enfants. Un élément doté de border-radius ne découpe pas ses descendants par défaut. Ajoutez overflow: hidden sur le parent si vous voulez que les enfants s'arrêtent au bord arrondi.
5. Les propriétés par coin avant la forme raccourcie. La cascade CSS est sensible à l'ordre, donc border-top-left-radius suivi de border-radius écrase la valeur par coin. Placez d'abord la forme raccourcie, puis les remplacements par coin.
6. Mélanger % et px maladroitement. Définir un rayon de 50 % sur un coin et de 12 px sur un autre produit rarement ce que les designers attendent. Restez sur une seule unité par élément.
7. Les tableaux et border-collapse: collapse. La référence MDN est explicite : border-radius ne s'applique pas aux éléments table ou inline-table lorsque les bordures sont fusionnées. Passez à border-collapse: separate, ou appliquez le rayon à un élément englobant.

Autres questions fréquentes

Pourquoi mon image n'a-t-elle pas de coins arrondis ?

Si l'image est dans un conteneur doté de border-radius mais que les coins paraissent toujours carrés, c'est que le parent ne découpe pas. Ajoutez overflow: hidden au parent. Vous pouvez aussi appliquer border-radius directement à l'élément <img> ; les images réagissent nativement à la propriété.

border-radius affecte-t-il les performances ?

De façon négligeable. Les navigateurs modernes rendent les coins arrondis sur le GPU et le coût est pratiquement identique à celui d'un bord carré. L'exception, c'est l'animation de border-radius sur un grand élément à chaque image (cela peut déclencher une recomposition des calques), mais les coins arrondis statiques sont quasiment gratuits.

Est-ce que cela fonctionne dans les navigateurs plus anciens ?

Oui. Tous les navigateurs depuis IE9 prennent en charge border-radius sans préfixe. Les variantes en propriétés logiques (border-start-start-radius, etc.) sont plus récentes : Chrome 89+, Firefox 66+, Safari 15+. Pour les anciens navigateurs ayant besoin du comportement logique, écrivez un petit bloc @supports comme solution de repli.

Comment créer une bulle de discussion ?

Utilisez les quatre propriétés individuelles par coin pour arrondir trois coins et laisser le quatrième petit ou anguleux. C'est la « bouche » qui pointe vers celui qui parle. Par exemple, une bulle de message sortant : border-radius: 16px 16px 4px 16px;. Pour des bulles adaptées au RTL, passez aux propriétés logiques individuelles pour que la bouche s'inverse avec le sens de lecture.

Pourquoi mes boutons pilule paraissent-ils inégaux selon la largeur des éléments ?

Une pilule force chaque coin à la moitié du plus petit côté, soit la hauteur pour un bouton typique. Ainsi, les boutons plus courts obtiennent des rayons plus petits et les boutons plus hauts des rayons plus grands. C'est le comportement souhaité. Si vous voulez un rayon constant sur chaque bouton quelle que soit sa taille, utilisez une valeur en pixels fixe (p. ex. border-radius: 24px) au lieu de l'astuce de la pilule.

Puis-je copier le CSS directement dans des projets Tailwind / Bootstrap ?

Oui, le CSS généré est une syntaxe standard simple, sans dépendance de préprocesseur ni de framework. Dans Tailwind v4, vous pouvez aussi écrire des valeurs arbitraires sous forme d'utilitaires (rounded-[12px] ou rounded-[30%/70%]) si vous préférez rester dans le style des classes utilitaires.