Générateur de border-radius

• Aperçu en direct et CSS instantané : le générateur met à jour l'aperçu en direct et la sortie CSS à chaque changement — aucun bouton à presser. Voyez exactement comment chaque rayon de coin affecte la forme et copiez la déclaration CSS en un clic.
• Contrôles uniformes et par coin : basculez entre le mode uniforme (un seul curseur pour tous les coins) et le mode par coin (valeurs indépendantes pour chaque coin). Choisissez votre unité — px pour les boîtes standard et % pour les formes elliptiques.
• 100 % privé — sans envoi de fichier : toute la génération de border-radius se fait localement dans votre navigateur. Vos choix de design ne quittent jamais votre appareil et ne sont jamais envoyés à un serveur — idéal pour les projets clients et les design systems propriétaires.
• Gratuit et sans limite : générez des styles de border-radius illimités, sans inscription, sans abonnement et sans plafond d'utilisation. Le générateur est entièrement gratuit pour toujours, sans publicité bloquant l'interface.

• Design de cartes et de composants : les designers d'interface utilisent le générateur pour styliser les cartes, boîtes de dialogue modales, infobulles et menus déroulants. L'aperçu visuel facilite la recherche du rayon de coin parfait correspondant au design system — d'un subtil 4 px à un généreux 16 px.
• Passage du design au code : les designers utilisent le générateur pour extraire les valeurs CSS exactes des maquettes visuelles et les transmettre aux développeurs. Fini la mesure au pixel près ou les approximations — copiez la déclaration border-radius exacte et collez-la dans le code.
• Style des images et des avatars : les développeurs web utilisent le générateur pour styliser les avatars de profil (circulaires à 50 %), les images de produits (arrondies à 8-12 px) et les galeries de vignettes. Le mode % crée des formes elliptiques et circulaires parfaites pour des images de tout format.
• Design d'interface d'applications mobiles : les développeurs mobiles utilisent le générateur pour styliser les formes de boutons, les bords de cartes et les en-têtes de bottom sheets. Le contrôle par coin permet des formes asymétriques qui suivent les tendances modernes de l'UI mobile, comme l'icône d'app « squircle » à la iOS.
• Apprentissage et expérimentation CSS : les développeurs frontend qui apprennent le CSS utilisent le générateur pour comprendre visuellement le fonctionnement de border-radius. L'aperçu en direct et les contrôles par coin permettent de voir comment chaque valeur affecte la forme finale — un outil parfait pour apprendre le CSS.
• Style des boutons et éléments de formulaire : les développeurs UX utilisent le générateur pour styliser les boutons, champs de saisie, barres de recherche et contrôles de formulaire. Harmoniser le border-radius entre des éléments de formulaire liés crée une cohérence visuelle et une expérience soignée.

La propriété CSS border-radius arrondit les coins du bord extérieur d'un élément. Vous pouvez définir un seul rayon pour les quatre coins (avec une valeur unique comme border-radius: 8px), deux valeurs pour les paires diagonales (8px 16px), ou quatre valeurs pour chaque coin individuellement (8px 4px 8px 4px). L'ordre est haut gauche, haut droite, bas droite, bas gauche — dans le sens horaire en partant du haut. Notre générateur gère tous ces formats et produit un CSS propre, prêt pour la production.

1. Choisissez votre mode de saisie : utilisez le mode Uniforme pour contrôler les quatre coins avec un seul curseur — parfait pour un arrondi cohérent. Passez en mode Par coin pour définir chaque coin indépendamment avec des champs numériques individuels disposés en grille 2×2 reflétant la disposition de l'élément.
2. Ajustez les valeurs et l'unité : faites glisser le curseur ou saisissez les valeurs directement. Basculez entre px (pixels pour un arrondi de taille fixe) et % (pourcentage pour les formes elliptiques/circulaires). L'aperçu se met à jour instantanément, affichant les valeurs exactes de rayon de chaque coin superposées sur l'aperçu.
3. Copiez le CSS : cliquez sur « Copier le CSS » pour copier la déclaration CSS prête pour la production dans votre presse-papiers. Le générateur produit le format abrégé optimal — une valeur, deux valeurs ou quatre valeurs selon la configuration de vos coins.

• px (pixels) : arrondi de taille fixe qui ne change pas lorsque l'élément est redimensionné. Utilisez px pour les composants d'interface standard comme les boutons, cartes et modales, où vous voulez un arrondi cohérent quelle que soit la taille de l'élément. Les valeurs vont généralement de 2 px (subtil) à 24 px (très arrondi).
• % (pourcentage) : arrondi relatif qui s'adapte à la taille de l'élément. Utilisez 50 % pour créer un cercle parfait ou une forme de pilule. Utilisez des pourcentages plus faibles pour un arrondi elliptique qui s'adapte à différentes dimensions. Les valeurs en pourcentage sont plafonnées à 50 % pour les formes circulaires.

La propriété border-radius est prise en charge par tous les navigateurs modernes sans préfixe vendeur. Elle prend aussi en charge les variantes de propriétés logiques border-start-start-radius et autres pour la compatibilité RTL et les modes d'écriture verticale. Pour les éléments circulaires, utilisez 50 % ; pour les boutons en forme de pilule, utilisez une valeur supérieure à la hauteur de l'élément (par ex. 9999px), qui se limite au rayon maximal possible.