Le générateur de border-radius CSS est un outil gratuit accessible dans le navigateur. Il permet de créer visuellement des valeurs d’arrondi des angles et d’en afficher un aperçu sans écrire une seule ligne de code.
Donnez forme à n'importe quel élément en quelques secondes. Faites glisser les curseurs, choisissez un paramètre prédéfini ou saisissez des valeurs exactes. L'aperçu est mis à jour en direct.
Caractéristiques principales :
- Les rayons elliptiques contrôlent les axes horizontal et vertical indépendamment, déverrouillant les formes au-delà des simples coins arrondis
- 10 presets y compris Pill, Circle, Squircle, Leaf, Ticket, Diamond, Wave et Egg
- Plusieurs formats d'exportation : CSS simple, SCSS, CSS-in-JS, et Tailwind config
- Angles liés ou indépendants pour des formes symétriques ou entièrement personnalisées
- Support Undo/Redo pour expérimenter librement
- Préfixe du fournisseur pour la compatibilité
-webkit- - Aperçu en direct avec arrière-plans sélectionnables (solide, damier, grille) et types de contenu (texte, avatar, bouton, carte)
Le CSS généré est prêt à être copié et collé. Pas d'inscription, pas d'installation, pas de non-sens.
Qu'est-ce qu'un générateur de rayon de bordure CSS
Un générateur de rayon de bordure CSS est un outil visuel basé sur un navigateur qui transforme les entrées de curseur, de poignée de glisser-déposer ou de coin numérique en code CSS (EN) prêt à l'emploi.
Au lieu de taper des valeurs à la main, vous faites glisser un coin, regardez la mise à jour de la forme et copiez la déclaration border-radius résultante directement dans votre feuille de style.
La plupart des générateurs offrent les mêmes commandes de base :
- Curseurs individuels ou champs numériques pour chaque coin
- Une poignée de déplacement que vous pouvez tirer directement sur la forme d'aperçu
- Un panneau de code en direct montrant l'abréviation générée lorsque vous vous déplacez
Les gens atteignent pour un la plupart du temps pour la même poignée d'emplois. Arrondir un design de carte, adoucir un bouton, façonner un avatar en cercle ou créer un panneau de style blob inhabituel pour une section de héros.
Les systèmes de conception ont tendance à formaliser cette décision plutôt que de la laisser à la conjecture. Google's Material Design (EN) en est un bon exemple. Il assigne des étapes d'angle fixes à des types de composants spécifiques au lieu de laisser chaque écran choisir son propre numéro.
Comment fonctionne la propriété Border-Radius en CSS
La propriété border-radius (EN) arrondit les coins de n'importe quelle boîte, d'une simple div à un bouton entièrement stylisé. Cela fonctionne que l'élément ait ou non une bordure visible.
Il s'applique au modèle de boîte lui-même et affecte donc le bord extérieur du remplissage et de l'arrière-plan. Cela vaut même pour les éléments construits directement à partir du balisage HTML (EN) sans wrapper supplémentaire.
.card {
border-radius: 12px;
}
.avatar {
border-radius: 50%;
}Syntaxe abrégée et propriétés individuelles
border-radius est une abréviation pour quatre propriétés distinctes, une par coin.
Écrire les quatre à la main est rarement nécessaire, mais connaître la cartographie est important lorsqu'une conception nécessite une asymétrie.
| Valeurs données | Coins affectés | Exemple |
|---|---|---|
| Une seule valeur | Tous les quatre coins également | border-radius: 12px; |
| Deux valeurs | Haut-gauche/bas-droit, puis haut-droit/bas-gauche | border-radius: 12px 4px; |
| Les quatre valeurs | En haut à gauche, en haut à droite, en bas à droite, en bas à gauche dans l'ordre | border-radius: 12px 4px 12px 4px; |
Les quatre équivalents longs, border-top-left-radius et les trois autres, acceptent exactement les mêmes valeurs. Ils sont ce qu'un générateur écrit dans les coulisses lorsqu'il doit cibler un seul coin.
/* shorthand */
border-radius: 12px 4px 12px 4px;
/* the same thing, longhand */
border-top-left-radius: 12px;
border-top-right-radius: 4px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 4px;Valeurs de rayon de quatre coins
L'ordre des coins importe :
- Le haut-gauche est toujours le premier
- En haut à droite et en bas à droite suivent dans le sens horaire
- En bas à gauche ferme la boucle
Si vous vous trompez dans cette commande dans une déclaration manuscrite, l’arrondi se fera du mauvais côté de la boîte. C'est l'un des bugs silencieux les plus courants dans une feuille de style.
Cette syntaxe de coin exacte est stable depuis longtemps. La propriété a atteint la ligne de base Nouvellement disponible en juillet 2015 et la ligne de base Largement disponible en janvier 2018, selon l'ensemble de données des fonctionnalités Web derrière le tableau de compatibilité de MDN (EN).
Un générateur évite complètement la question de l'ordre, puisque chaque coin a son propre contrôle étiqueté et que l'outil assemble le raccourci pour vous.
Quelles unités Border-Radius prend-il en charge ?
Border-radius accepte une valeur de longueur-pourcentage, ce qui signifie en pratique que quatre options réelles apparaissent dans l'utilisation quotidienne : pixels, pourcentages, em, et rem.
Le comportement des unités diffère plus qu'il n'y paraît :
- px donne une taille de coin fixe qui ne change jamais avec les propres dimensions de l'élément
- % calcule le coin comme une fraction de la largeur et de la hauteur de l'élément, ce qui transforme un div carré en un cercle parfait à 50%
- em ajuste le rayon en fonction de la taille de police de l'élément.
- rem s'adapte plutôt à la taille de police racine, de sorte que les composants imbriqués restent cohérents même lorsqu'un parent modifie sa propre taille de caractères.
Choisir entre les deux derniers se produit assez souvent qu'il vaut la peine de comprendre la différence entre em et rem (EN) avant de verrouiller une valeur dans un système de design.
Les valeurs de pourcentage sont celles qui rendent un rayon de coin réellement réactif. La forme est recalculée automatiquement dans le cadre d'une approche plus large de design réactif (EN), sans réécriture de requête média à chaque point d'arrêt.
Les systèmes de conception de production ont tendance à verrouiller ces choix avec des nombres réels plutôt que de choisir une valeur par écran. L'échelle de forme de Material Design 3 (EN), par exemple, spécifie 4dp pour son pas de coin très petit et 28dp pour les surfaces très grandes, avec plusieurs pas fixes entre les deux.
Comment fonctionne le rayon de bordure elliptique
Le rayon de bordure elliptique utilise une barre oblique à l'intérieur de la valeur pour définir un rayon horizontal et vertical différent pour le même coin. Un rayon simple ne produit qu'un seul arc circulaire.
Paires de rayons horizontales et verticales
La syntaxe se divise en deux moitiés séparées par une barre oblique, les rayons horizontaux en premier et les rayons verticaux en second.
/* horizontal radius 40px, vertical radius 20px, every corner */
border-radius: 40px / 20px;
/* four corners, each with its own horizontal / vertical pair */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;Un rayon circulaire unique utilise un seul nombre pour les deux axes. Une courbe elliptique permet aux deux axes de différer, ce qui étire la courbe au lieu de la garder parfaitement ronde.
Les coins circulaires sont identiques sous tous les angles et fonctionnent bien pour les avatars, les badges et les boutons.
Les coins elliptiques s'étirent de manière inégale et conviennent aux composants plus larges tels que les étiquettes en forme de pilule ou les panneaux asymétriques.
Un générateur qui expose deux curseurs par coin, plutôt qu'un, est le moyen rapide de créer cette association sans effectuer manuellement le calcul de la syntaxe des barres obliques.
Squircle et Blob-Style Formes
Les icônes des applications iOS d'Apple (EN) ne sont pas de simples rectangles arrondis. Ils utilisent une superellipse, communément appelée squircle. Le rayon d'angle se situe à environ 22 % de la largeur de l'icône, avec un lissage de courbe continue plutôt qu'un arc circulaire simple.
Le rayon de bordure standard ne peut pas reproduire cette courbe continue à lui seul, puisqu'il ne dessine que des arcs circulaires ou elliptiques.
Le Groupe de travail sur le CSS s &apos ; est attaqué directement à cette lacune. Une nouvelle propriété corner-shape (EN) avec une fonction superellipse() a été résolue dans le brouillon du module CSS Borders niveau 4. Il ajoute des mots-clés tels que squircle, bevel, scoop et notch qui remodelent la courbe à l'intérieur d'une boîte de rayon de bordure existante. MDN (EN) le classe actuellement comme étant de disponibilité limitée, pas encore sûr de s'y fier sans une solution de secours.
.icon {
border-radius: 22%;
corner-shape: squircle; /* limited availability, needs a fallback */
}Jusqu'à ce que cela arrive partout, les équipes à la recherche d'un vrai blob ou d'une forme organique optent généralement pour l'une des deux solutions de contournement au lieu d'empiler plus de valeurs de rayon de bordure.
Un chemin construit la forme comme un chemin SVG (EN), ce qui donne un contrôle total sur chaque point de la courbe.
L'autre le conserve en CSS ordinaire à travers un générateur de chemin de clip, coupant une silhouette irrégulière d'une boîte rectangulaire normale.
Prise en charge du navigateur pour les préfixes Border-Radius et Vendor
Border-radius est l'une des propriétés CSS3 les plus largement supportées disponibles aujourd'hui, sans aucune lacune significative dans la couverture des navigateurs modernes.
Prise en charge du navigateur actuel
Le soutien a été solide pendant plus d'une décennie à ce stade.
| Navigateur | Unprefixed Support Since |
|---|---|
| Chrome | Version 4 |
| Firefox | Version 4 |
| Safari | Version 5 |
| Edge | Version 12 (première version) |
Les données Can I Use (EN), tirées de StatCounter GlobalStats en août 2026, placent le support mondial pour les valeurs de pourcentage de rayon de bordure à 97,26% du trafic de navigateur suivi dans le monde entier.
Ce niveau de compatibilité entre les navigateurs (EN) est la raison pour laquelle presque aucun générateur aujourd'hui ne prend la peine d'offrir un mode de secours de navigateur hérité par défaut.
Histoire du préfixe du fournisseur
Trois époques distinctes existent :
- L'ère Webkit : les premières versions de Safari et Chrome sont nécessaires -webkit-border-radius
- Mozilla era : les premières versions de Firefox sont nécessaires -moz-border-radius
- Ère moderne : tous les navigateurs actuels acceptent la propriété sans préfixe, sans aucun préfixe requis
Un générateur qui affiche toujours les deux lignes préfixées par défaut remplit votre feuille de style de code mort que personne ne pourra lire.
Comment utiliser un générateur de rayon de bordure CSS
L'utilisation d'un d'entre eux suit la même courte séquence, quel que soit l'outil spécifique que vous ouvrez.
- Choisissez une unité (px, % ou em) et décidez si les coins restent liés ou se déplacent indépendamment.
- Ajustez chaque coin avec son curseur, ou passez à l'onglet Rayons verticaux pour une forme elliptique. Le diagramme de coin montre quelle valeur correspond à quel coin.
- Regardez l'aperçu en direct pour confirmer que la forme rendue correspond à ce que vous avez imaginé. Les chiffres seuls peuvent être trompeurs dans les petites tailles, alors échangez le contenu de l'avatar, du bouton ou de la carte pour tester quelque chose de réel.
- Copiez le résultat dans le format utilisé par votre projet : CSS, SCSS, CSS-in-JS ou Tailwind.
Le contenu de l'aperçu est plus important que ce que les gens s'y attendent. Un rayon basé sur un pourcentage a un aspect complètement différent sur un avatar carré que sur une carte large.
Ce flux de travail apparaît constamment dans le travail ordinaire de conception de carte (EN), où quatre coins ont souvent besoin d'un traitement légèrement différent pour correspondre au langage visuel d'une marque.
Une habitude qui vaut la peine d'être prise : exécutez le code exporté dans un minifier CSS (EN) avant de l'envoyer en production. Cela capture les espaces supplémentaires et les lignes préfixées restantes.
Comparaison des outils générateur de border-radius CSS
Les outils de génération se divisent en quelques catégories reconnaissables une fois que vous les alignez côte à côte.
| Type d &apos ; outil | Méthode d'entrée | Exportation typique | Coût |
|---|---|---|---|
| Générateurs Web à poignée de déplacement (par exemple, Fancy Border Radius Generator) | Faites glisser directement sur la forme | CSS shorthand | Gratuit |
| Générateurs web basés sur des curseurs | Curseurs numériques par coin | CSS, parfois SCSS | Gratuit |
| Outils de développement Browser DevTools | Cliquez et faites glisser la valeur en ligne | Aucun, modifie les styles en direct | Construit dans |
| Logiciel de conception | Champ de rayon d'angle sur la forme | Traduction manuelle en CSS | Gratuit ou payant |
Chrome (EN) et Firefox DevTools vous permettent de cliquer sur une valeur de rayon de bordure dans le panneau des règles et de la faire glisser horizontalement pour la modifier. Cela couvre les ajustements ponctuels rapides sans ouvrir un outil séparé du tout.
Le logiciel de conception se distingue des autres. Si vous arrondissez déjà les coins dans Figma (EN), la valeur de rayon indiquée doit encore être saisie dans CSS à la main ou lue lors de la transmission. Elle n'est pas exportée automatiquement en tant que déclaration utilisable.
Beaucoup d’équipes conservent une petite pile d’outils à usage unique plutôt qu’une application tout-en-un. Un générateur de rayon s'associe naturellement avec quelque chose comme un générateur de boutons CSS (EN) pour le reste du style d'un composant.
La plupart des développeurs préfèrent encore le CSS écrit à la main à toute étape visuelle en premier. L'enquête State of CSS 2024 (EN), menée par Devographics, a révélé que 60,9% des répondants implémentent leurs propres conceptions directement dans CSS. Seulement 34,6% conçoivent dans une application séparée avant de la traduire en code.
Générateur ou manuel CSS : lequel utiliser
Un générateur de rayon de bordure CSS gagne son maintien sur les coins asymétriques et multi-valeurs.
Le CSS écrit à la main gagne encore dans les cas les plus simples, où taper une valeur mémorisée est plus rapide que d'ouvrir un onglet de navigateur.
Le CSS manuel fonctionne mieux lorsque :
- La conception nécessite un rayon uniforme à travers chaque coin
- La valeur exacte existe déjà dans un guide de style ou un fichier de jeton
- Le changement est une modification rapide d'une ligne dans une règle existante
Un générateur gagne sa place quand :
- Les coins ont besoin de valeurs différentes de chaque côté
- Les valeurs de syntaxe elliptique ou slash sont impliquées
- La forme doit être vue avant qu'un nombre ne soit commis au code
Les systèmes de conception de production ont tendance à contourner tout le débat en verrouillant les valeurs dans des jetons à l'avance.
Le système de conception (EN) Polaris de Shopify fournit une échelle de jeton de rayon de bordure publique avec des étapes nommées commençant à 0px et allant jusqu'à 2px et 4px. Personne dans l'équipe ne choisit un numéro par sensation ou en atteignant un curseur au milieu de la construction.
Une fois que les jetons existent, le vrai choix cesse d’être le générateur versus la saisie manuelle. Il devient jeton contre improvisation.
Formats d'exportation : CSS, SCSS et classes d'utilitaires
Le bon format d'exportation dépend de ce que le reste de la base de code attend déjà, pas du bouton qui est étiqueté "copy".
Sortie CSS et SCSS
La sortie CSS simple tombe directement dans une feuille de style sans aucune étape supplémentaire requise.
Les résultats du SCSS diffèrent de quelques façons concrètes :
- Les valeurs peuvent être stockées en tant que variables et réutilisées entre les composants
- Un mixin peut générer les quatre propriétés de coin à partir d'une seule entrée
- L'imbrication conserve les règles de coin limitées à leur sélecteur parent
Les équipes exécutant déjà un pipeline de construction Sass obtiennent un véritable kilométrage de la sortie SCSS.
Les équipes qui n'en ont pas hériteront simplement de la syntaxe supplémentaire qu'elles compileront directement vers le même CSS de toute façon.
Sortie de classe utilitaire
Les frameworks utilitaires transforment une valeur border-radius en un nom de classe au lieu d'une déclaration brute.
| Classe Tailwind | Valeur rem | Pixel équivalent |
|---|---|---|
| arrondi-xs | 0.125rem | 2px |
| rounded-md | 0.375rem | 6px |
| rounded-xl | 0.75rem | 12px |
| rounded-4xl | 2rem | 32px |
round-full se situe entièrement en dehors de cette échelle numérique. La la propre documentation de Tailwind (EN) la définit comme calc(infinity * 1px), donc une forme de pilule tient quelle que soit la taille d'un élément sans un nombre fixe derrière.
Quiconque choisit une approche de classe utilitaire choisit en fait entre les conventions de nommage Tailwind (EN) et Bootstrap (EN). Les deux cadres fournissent leur propre échelle d'arrondi au lieu de valeurs brutes de rayon de bordure.
Un générateur qui ne produit que du CSS brut est inutile sur un projet standardisé autour de l'un ou l'autre. Le vrai travail devient de mapper une valeur de pixel vers le nom de classe le plus proche à la main.
Lorsqu'un générateur de rayon de bordure ne s'applique pas
Border-radius a un plafond mathématique dur qu'aucun générateur, poignée de glisser ou curseur, ne peut dépasser.
Formes complexes ou organiques
La spécification CSS Backgrounds and Borders (EN) définit exactement ce qui se passe lorsque les rayons de coin adjacents demandent plus d'espace que la boîte n'en a.
Si la somme de deux rayons adjacents dépasse la longueur de ce bord, le navigateur réduit proportionnellement chaque rayon sur la boîte jusqu'à ce que les courbes cessent de se chevaucher.
Cette seule règle est ce qui cape un rayon de 100% sur un élément carré jusqu'à un visuel de 50%, produisant un cercle propre au lieu d'une forme pliée.
- Courbes symétriques simples : fermées automatiquement, toujours rendues sous la forme d'un arc net
- Formes multi-lobées ou concaves : en dehors de ce que toute valeur de rayon de bordure peut produire, générée ou écrite à la main
Les solutions de contournement de style squircle et blob couvertes précédemment existent précisément parce que ce plafond est fixe, pas parce que les générateurs de rayon de bordure n'ont pas encore rattrapé.
Pour les formes qui ont besoin de se couper dans une image plutôt que de simplement tourner autour de son conteneur, CSS mask-image ou un SVG <clipPath> reprend là où border-radius s'arrête.
Exigences du navigateur hérité
Les environnements de rendu en dehors de la pile de navigateur moderne se comportent différemment :
- Clients de messagerie : border-radius se situe à 68,29% de support complet plus 14,63% de support partiel sur les clients suivis, selon les données Can I Email (EN). C'est bien en dessous du chiffre presque universel des navigateurs modernes post
- Outlook sur Windows : les versions de 2003 à 2019 rendent les e-mails via un moteur basé sur Word qui ignore entièrement le rayon de la bordure et nécessite un élément VML RoundRect à la place
- Yahoo Mail et AOL : prennent en charge la propriété mais suppriment la syntaxe de barre oblique utilisée pour les coins elliptiques.
Rien de tout cela ne contredit les chiffres de support de navigateur couverts précédemment. Il s'agit d'un pipeline de rendu distinct que l'aperçu en direct d'un générateur n'a jamais été conçu pour simuler.
Erreurs et correctifs courants de Border-Radius
La plupart des bugs border-radius remontent à une poignée de récidivistes.
- Unités mixtes dans une déclaration : l'appariement de px et % dans le même abréviation produit des coins qui se déplacent de manière incohérente sur les tailles d'écran. Choisissez une unité par composant et restez-y
- Contrôle de débordement manquant : un conteneur arrondi avec une image carrée à l'intérieur montre toujours des coins carrés à moins que le parent ne définisse le débordement sur caché
- Erreurs d'ordre des coins : oublier la séquence haut-gauche, haut-droit, bas-droit, bas-gauche arrondit le mauvais côté d'une boîte asymétrique
- Préfixes de fournisseurs restants : la copie d'extraits d'un ancien générateur fournit toujours des lignes -webkit- et -moz- qu'aucun navigateur actuel ne lit
/* the overflow fix: children and background images follow the curve */
.thumb {
border-radius: 16px;
overflow: hidden;
}Coller la sortie du générateur directement dans un fichier de production sans un deuxième regard est la façon dont le problème des préfixes restants survit généralement à une révision du code.
Faire passer le bloc exporté par un CSS beautifier (EN) rend d’abord ces lignes mortes évidentes avant qu’elles n’atteignent une requête de tirage.
Questions fréquentes : Générateur de border-radius CSS
Quelle est la différence entre le rayon de bordure et les coins arrondis
"Les coins arrondis" décrit le résultat visuel. Border-radius est la propriété CSS spécifique qui le produit, fonctionnant sur n'importe quelle boîte, qu'elle ait ou non une bordure visible. Les concepteurs disent "coins arrondis" vaguement, couvrant le rayon de bordure, les chemins SVG et les formes de chemin de clip.
Pouvez-vous exporter des valeurs de rayon de bordure directement vers des classes Tailwind ou Bootstrap ?
L'onglet Tailwind de ce générateur écrit une entrée de configuration, mais aucun outil ne mappe automatiquement une valeur de pixel directement à une classe d'utilitaire existante. Tailwind et Bootstrap fournissent des échelles d'arrondissement fixes, donc une valeur arbitraire nécessite toujours une traduction manuelle vers la classe la plus proche, comme rounded-lg ou .rounded-3.
Un générateur de rayon de bordure est-il nécessaire pour la conception réactive ?
Non. Le rayon de bordure basé sur un pourcentage s'adapte déjà à la largeur et à la hauteur d'un élément, de sorte qu'une valeur unique s'adapte à travers les points d'arrêt sans générateur ni réécriture de requête multimédia. Un générateur accélère uniquement la recherche visuelle de ce pourcentage plutôt que de le calculer manuellement.
Le rayon de bordure affecte-t-il les images d'arrière-plan ou uniquement les bords des éléments ?
Border-radius coupe tout à l'intérieur de la boîte, images d'arrière-plan incluses, une fois que overflow est défini sur hidden. Sans cette règle de débordement, le bord extérieur de la boîte s'arrondit visuellement tandis qu'une image d'arrière-plan ou un élément enfant peut toujours afficher des coins carrés en dessous.
Que devriez-vous faire juste après qu'un générateur de rayon de bordure CSS exporte votre code ?
Le travail d'un générateur de rayon de bordure CSS se termine au moment où il vous donne une valeur. Ce qui se passe ensuite décide si ce nombre tient dans un vrai système de conception ou est réécrit par la prochaine personne qui touche le fichier.
Accepter la valeur exportée sans la tester par rapport au contenu réel est un mauvais échange. Vous économisez une minute et obtenez un coin qui ressemble à la boîte d'espace réservé de l'outil et légèrement décalé sur une photo ou un bouton réel.
Trois étapes transforment un nombre généré en quelque chose de durable :
- Tester la valeur par rapport au contenu actif, pas une forme d'espace réservé
- Verrouillez-le dans un jeton de conception au lieu d'un simple nombre
- Enregistrer l'ordre des coins pour que la prochaine modification ne l'inverse pas
Les coins arrondis sont rarement seuls sur une vraie interface. Coupler ce rayon avec un générateur d'ombre de boîte est généralement la prochaine décision de style sur la même carte ou le même bouton.