Générateur de border-radius

Cette valeur transforme un élément carré en cercle parfait. Pour obtenir un vrai cercle, l'élément doit avoir une largeur et une hauteur égales — par exemple `width: 100px; height: 100px; border-radius: 50%`. Le rayon de 50 % se rejoint au milieu sur les quatre côtés, créant une courbe parfaite. Sur un élément non carré, 50 % crée une ellipse — plus large que haute ou plus haute que large, selon les dimensions de l'élément. C'est la façon la plus courante de créer des images d'avatar circulaires, des boutons ronds et des conteneurs d'icônes en CSS.

Utilisez `border-radius: 9999px` (ou toute grande valeur comme 100px) sur un élément non carré tel qu'un bouton ou un badge. Le navigateur limite automatiquement le rayon à la moitié de la dimension la plus courte de l'élément, de sorte que les extrémités courtes deviennent des demi-cercles parfaits tandis que les côtés longs restent droits. Cela crée le classique bouton CTA en forme de pilule présent dans la plupart des systèmes de design modernes. L'astuce `9999px` fonctionne quelle que soit la taille de l'élément — pas besoin de calculer manuellement la moitié de la hauteur. Le préréglage Pill de ce générateur applique ce motif instantanément.

Les valeurs en pixels sont absolues — un rayon de `12px` reste 12 pixels quelle que soit la taille de l'élément. Si l'élément est redimensionné, la taille du coin reste fixe. Les valeurs en pourcentage sont relatives — `50%` courbe toujours jusqu'au point médian exact de chaque côté, produisant une forme proportionnelle qui évolue avec l'élément. Utilisez le pourcentage (`50%`) pour les formes comme les cercles et les pills qui doivent s'adapter à l'élément. Utilisez les pixels pour les composants UI comme les cartes, boutons et champs de saisie où vous souhaitez une taille de coin constante définie par le système de design, indépendamment du contenu.

Un `border-radius` standard ne courbe les coins que vers l'extérieur (convexe). Pour un coin inversé ou concave — la courbe en encoche ou découpe vers l'intérieur utilisée sur les tickets, onglets et bulles de dialogue — vous ne pouvez pas utiliser `border-radius` seul. La technique courante est un masque radial-gradient : `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, répété pour chaque coin que vous souhaitez découper vers l'intérieur. Une alternative est un pseudo-élément positionné (`::before`) peint avec la couleur de fond de la page et doté de son propre `border-radius` convexe, superposé sur un coin pour créer une forme concave. Pour les bords festonnés ou perforés — comme la ligne de déchirement d'un ticket — un masque radial-gradient répété le long d'un côté produit la perforation en festons. Ainsi, le « border radius inversé » est réellement une technique de masquage plutôt qu'une valeur border-radius — utile à connaître lors de la recherche d'un générateur de border radius inversé.

Utilisez les propriétés de coin individuelles : `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, ou `border-bottom-left-radius`. Par exemple, `border-bottom-right-radius: 24px` arrondit uniquement le coin inférieur droit, laissant les trois autres angles vifs. Vous pouvez les combiner librement : `border-top-left-radius: 16px; border-bottom-right-radius: 16px` crée une forme arrondie en diagonale. Dans le raccourci, deux valeurs définissent des paires de coins opposés : `border-radius: 16px 0` arrondit les coins supérieur gauche et inférieur droit, laissant le supérieur droit et l'inférieur gauche vifs.

Dans le sens des aiguilles d'une montre à partir du coin supérieur gauche : Haut-gauche → Haut-droit → Bas-droit → Bas-gauche. Ainsi `border-radius: 16px 8px 0 8px` donne 16px au coin supérieur gauche, 8px au coin supérieur droit, 0 au coin inférieur droit, et 8px au coin inférieur gauche. Cela correspond à la direction du raccourci CSS standard utilisée par `margin`, `padding` et `border-width`. Avec deux valeurs, la première s'applique au supérieur gauche et à l'inférieur droit ; la seconde au supérieur droit et à l'inférieur gauche. Avec trois valeurs, la seconde s'applique au supérieur droit et à l'inférieur gauche. Une valeur s'applique uniformément aux quatre coins.

Oui — appliquez `border-radius` directement à l'élément `<img>` : `img { border-radius: 50%; width: 100px; height: 100px; }` pour un avatar circulaire. Vous pouvez aussi envelopper l'image dans un `<div>` avec `overflow: hidden` et appliquer border-radius au conteneur, ce qui vous donne plus de contrôle sur la mise en page. Utilisez la fonctionnalité d'import d'image de cet outil pour prévisualiser l'apparence de votre rayon sur votre vraie photo avant de copier le CSS. Cela est particulièrement utile pour les recadrages d'avatar, les miniatures de carte média et les mises en page de galerie où la forme exacte du découpage affecte le design.

Définissez trois coins à une grande valeur et laissez-en un à zéro : `border-radius: 50% 50% 50% 0`. Combiné avec `transform: rotate(-45deg)`, cela crée la forme classique de marqueur de carte géographique. Ajustez le coin à zéro pour orienter la goutte dans différentes directions : `0 50% 50% 50%` pointe vers la gauche, `50% 0 50% 50%` pointe vers la droite. Le coin à zéro crée la pointe effilée ; les trois coins à grand rayon forment le corps arrondi. Utile pour les marqueurs de localisation, les pointeurs et les accents décoratifs dans les interfaces au style illustratif.

Le slash sépare les rayons horizontal et vertical pour chaque coin. La syntaxe est : `border-radius: [rayons horizontaux] / [rayons verticaux]`. Par exemple, `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` crée une forme semblable à un œuf où chaque coin a une courbe elliptique asymétrique. Le générateur de blob aléatoire de cet outil utilise cette syntaxe pour produire des formes organiques et asymétriques — populaires pour les arrière-plans de sections héros, blobs décoratifs et éléments de design au style illustratif. Chaque coin peut avoir un rapport rayon horizontal/vertical différent.

L'outil border-radius de cssmatic.com est fonctionnel mais vieillissant — il manque d'import d'image, de génération de blob et d'une bibliothèque de préréglages. L'almanach css-tricks.com est une excellente documentation mais pas un générateur interactif. Le créateur de clip-path de bennettfeely.com couvre un cas d'usage similaire mais cible clip-path plutôt que border-radius. Le générateur d'UtiloKit offre : un aperçu en direct avec import d'image (traité entièrement côté client), des préréglages de formes (cercle, pill, carte, œuf, blob), la génération de blob aléatoire via la syntaxe à 8 valeurs avec slash, la bascule d'unité px/%, et trois formats de copie. Sans publicités, sans filigrane, sans inscription, et rien envoyé à un serveur.

Non — l'image est chargée exclusivement via l'API File du navigateur et ne quitte jamais votre appareil. L'élément d'aperçu affiche l'image localement à l'aide d'un appel `createObjectURL()` qui reste entièrement en mémoire du navigateur. Aucun envoi, aucun traitement serveur, aucun stockage en nuage. La même architecture côté client s'applique à toutes les autres fonctionnalités : les entrées des curseurs, la génération de CSS, la randomisation de blob et la copie dans le presse-papiers fonctionnent toutes en JavaScript sans aucune requête réseau après le chargement initial de la page. Vos images et travaux de conception restent totalement privés.

`border-radius` est entièrement animable via les transitions CSS et les animations par images clés. Utilisez `transition: border-radius 0.3s ease` pour interpoler progressivement entre deux valeurs au survol. Utilisez `@keyframes` pour faire évoluer continuellement les formes — animer de `0` à `50%` fait passer un carré à un cercle. Faire évoluer entre deux formes blob (différentes valeurs à 8 valeurs avec slash) crée des animations fluides et organiques populaires dans les arrière-plans de sections héros. Notez que l'animation de border-radius déclenche un repeint à chaque image, donc utilisez `will-change: border-radius` sur les éléments qui s'animent fréquemment.

`border-radius` est purement visuel — il découpe l'apparence peinte de l'élément mais ne modifie pas sa boîte de mise en page, sa zone de marge ou la zone de détection des événements pointeur. Les coins carrés invisibles restent cliquables et occupent toujours leur espace dans la mise en page. C'est important à savoir pour les interfaces tactiles : un bouton circulaire a toujours une zone cliquable carrée dans ses coins. Si vous avez besoin que la zone de clic suive précisément la forme arrondie, utilisez `clip-path: circle()` à la place, qui découpe également les événements pointeur. `box-shadow` suit correctement `border-radius` ; `outline` ne le fait pas dans la plupart des navigateurs — utilisez `box-shadow: 0 0 0 3px color` comme alternative d'anneau de focus arrondi.

Oui — l'outil est entièrement adaptatif et fonctionne dans n'importe quel navigateur mobile moderne. Sur iPhone, utilisez-le dans Safari ou Chrome sans rien installer. Sur Android, Chrome, Firefox et Edge fonctionnent tous. Les curseurs sont adaptés au tactile avec des poignées de glissement de taille appropriée. L'import d'image utilise le sélecteur de fichiers natif sur mobile, vous permettant de sélectionner depuis votre galerie photo ou l'application Fichiers. La copie du CSS dans le presse-papiers fonctionne via l'API Web Clipboard standard prise en charge par tous les navigateurs mobiles modernes. L'outil entier fonctionne côté client, donc il n'y a pas d'application à télécharger, pas de compte, et aucune donnée envoyée nulle part.