Que signifient les huit valeurs ?

Quatre rayons horizontaux (un par coin) et quatre rayons verticaux (aussi un par coin). Quand le rayon horizontal et vertical d'un coin sont égaux, le coin est un quart de cercle. Quand ils diffèrent, c'est un quart d'ellipse - et c'est ce qui donne les formes blob organiques, les pointes de feuille, les talons de ticket et les icônes squircle façon iOS.

Qu'est-ce qu'un squircle ?

Une approximation de rectangle arrondi plus douce que ce que CSS border-radius produit nativement - la forme d'icône d'écran d'accueil iOS. Le plus proche en CSS pur est d'utiliser des rayons horizontaux et verticaux inégaux (par ex. `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). Les vrais squircles demandent un chemin SVG ou un paint worklet Houdini - le préréglage ici est la meilleure approximation en CSS.

Pourquoi la syntaxe avec slash ?

Sans le slash, tous les coins ont des rayons circulaires (horizontal = vertical). Le slash permet de définir des rayons horizontaux et verticaux différents par coin, ce qui est précisément l'intérêt des formes asymétriques. Tous les navigateurs le supportent, et c'est le seul moyen d'obtenir une forme « feuille » (un coin presque carré, le coin opposé presque rond).

Pourcentages ou pixels ?

Oui aux pourcentages - ils se mettent à l'échelle avec l'élément, ce qu'on veut pour des formes qui doivent rester proportionnelles. Les pixels sont prévisibles mais cassent au redimensionnement (un rayon de 40 px sur un élément de 30 px se clippe à la moitié de la largeur, devenant un demi-cercle). Le générateur utilise des pourcentages pour que les formes survivent au redimensionnement.

De grands rayons posent-ils problème dans les vieux navigateurs ?

Border-radius est supporté dans tous les navigateurs depuis 2010. La syntaxe avec slash pour les rayons asymétriques l'est depuis IE 9. Le seul piège moderne est le débordement : `border-radius` ne clippe pas le contenu enfant sauf si vous mettez aussi `overflow: hidden` sur le même élément - sinon images et enfants positionnés en absolu débordent les coins arrondis.

Générateur de border-radius

Border-radius asymétrique avec 8 valeurs de coin, aperçu en direct et préréglages (pilule, blob, feuille, ticket).

Préréglages

Rayons horizontaux

Haut-gauche

Haut-droit

Bas-droit

Bas-gauche

Rayons verticaux

Haut-gauche

Haut-droit

Bas-droit

Bas-gauche

CSS

border-radius: 60% 40% 30% 70% / 30% 70% 60% 40%;

Aperçu

Le border-radius prend plus d'un nombre. La forme complète CSS : `border-radius: haut-gauche haut-droit bas-droit bas-gauche / haut-gauche-v haut-droit-v bas-droit-v bas-gauche-v;` - huit valeurs pour que chaque coin se courbe différemment horizontalement et verticalement. Glissez les curseurs, l'aperçu se reforme en temps réel ; les huit nombres apparaissent dessous. Les préréglages chargent les formes classiques - pilule, blob, feuille, ticket, organique - à affiner ensuite.

Comment l'utiliser

Préréglage ou départ vierge
Pilule, blob, feuille, ticket, organique, squircle - un clic charge les valeurs. Ou ignorez les préréglages et glissez les curseurs.
Réglez les huit rayons
Quatre horizontaux, quatre verticaux. Valeurs égales par coin = un cercle ; inégales = une ellipse.
Redimensionnez l'aperçu
Basculez entre carré, rectangle large et rectangle haut pour confirmer que la forme tient à différents ratios.
Copiez le CSS
La déclaration `border-radius: a b c d / e f g h;` complète est prête à coller.

Qu'est-ce que c'est ?

Un générateur de border-radius construit la déclaration CSS `border-radius` complète avec les huit valeurs possibles - quatre rayons horizontaux (un par coin) plus quatre verticaux. Le résultat permet de décrire toute combinaison de coins circulaires et elliptiques en une seule déclaration. L'esthétique « blob » et « formes organiques » omniprésente dans le design web des années 2020 est bâtie sur des border-radius asymétriques - peu coûteux, GPU-friendly, et qui scalent sans jamais rastériser.

Quand l'utiliser

Formes décoratives « blob » organiques pour landing pages, boutons et tags en forme de pilule, formes feuille et ticket pour badges et coupons, coins de carte asymétriques (haut-gauche net, bas-droit arrondi) pour des designs en couches, approximations squircle pour icônes façon iOS, et partout où un simple `border-radius: 8px` est trop neutre.

Erreurs courantes

Oublier `overflow: hidden` sur le parent - images enfants et contenu absolument positionné débordent les bords arrondis. Utiliser des rayons en pixels sur des éléments à largeur flexible - le rayon ne suit pas l'élément. Cumuler border-radius avec `clip-path` - les deux interagissent et un seul gagne ; choisissez le bon outil. Animer entre rayons très différents sans transition - le saut du rond au net paraît mécanique.

FAQ

Que signifient les huit valeurs ?: Quatre rayons horizontaux (un par coin) et quatre rayons verticaux (aussi un par coin). Quand le rayon horizontal et vertical d'un coin sont égaux, le coin est un quart de cercle. Quand ils diffèrent, c'est un quart d'ellipse - et c'est ce qui donne les formes blob organiques, les pointes de feuille, les talons de ticket et les icônes squircle façon iOS.
Qu'est-ce qu'un squircle ?: Une approximation de rectangle arrondi plus douce que ce que CSS border-radius produit nativement - la forme d'icône d'écran d'accueil iOS. Le plus proche en CSS pur est d'utiliser des rayons horizontaux et verticaux inégaux (par ex. `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). Les vrais squircles demandent un chemin SVG ou un paint worklet Houdini - le préréglage ici est la meilleure approximation en CSS.
Pourquoi la syntaxe avec slash ?: Sans le slash, tous les coins ont des rayons circulaires (horizontal = vertical). Le slash permet de définir des rayons horizontaux et verticaux différents par coin, ce qui est précisément l'intérêt des formes asymétriques. Tous les navigateurs le supportent, et c'est le seul moyen d'obtenir une forme « feuille » (un coin presque carré, le coin opposé presque rond).
Pourcentages ou pixels ?: Oui aux pourcentages - ils se mettent à l'échelle avec l'élément, ce qu'on veut pour des formes qui doivent rester proportionnelles. Les pixels sont prévisibles mais cassent au redimensionnement (un rayon de 40 px sur un élément de 30 px se clippe à la moitié de la largeur, devenant un demi-cercle). Le générateur utilise des pourcentages pour que les formes survivent au redimensionnement.
De grands rayons posent-ils problème dans les vieux navigateurs ?: Border-radius est supporté dans tous les navigateurs depuis 2010. La syntaxe avec slash pour les rayons asymétriques l'est depuis IE 9. Le seul piège moderne est le débordement : `border-radius` ne clippe pas le contenu enfant sauf si vous mettez aussi `overflow: hidden` sur le même élément - sinon images et enfants positionnés en absolu débordent les coins arrondis.