Générateur d’arrondis de bordure
Créer des propriétés CSS border-radius
Saisie et options
Préréglages et exemples rapides
Fonctionne dans votre navigateur. Vos saisies restent sur cet appareil.
Résultats
Saisissez vos valeurs pour voir le résultat.
À propos du Générateur d’arrondis de bordure
Notre générateur de border-radius CSS gratuit vous donne un contrôle visuel complet sur les coins arrondis de n’importe quel élément HTML. Réglez chaque coin séparément ou liez-les tous ensemble, choisissez parmi plusieurs unités (px, %, em, rem) et voyez le résultat instantanément dans le panneau d’aperçu en direct.
Les coins arrondis font partie des fondamentaux du design web moderne. Des arrondis discrets de 4px sur les cartes et les champs aux cercles complets à 50% pour les avatars, la propriété border-radius façonne la perception de votre interface. Cet outil permet de trouver sans effort les valeurs exactes dont vous avez besoin, sans tâtonner ni actualiser le navigateur en permanence.
Le générateur propose 10 formes prédéfinies comme Carré, Cercle, Pilule, Goutte et Organique, ainsi qu’un générateur aléatoire pour explorer de nouvelles idées. Le résultat est fourni dans plusieurs formats, dont la notation abrégée CSS, les propriétés de coin individuelles, une classe CSS prête à l’emploi et un équivalent approximatif en Tailwind CSS.
Fonctionnalités principales
- Contrôle indépendant de chaque coin : haut gauche, haut droit, bas droit et bas gauche
- Option de liaison des coins pour appliquer un rayon uniforme aux quatre coins
- Quatre unités au choix : pixels (px), pourcentage (%), em et rem pour les designs adaptatifs
- Aperçu en temps réel avec taille d’élément réglable (100-300px) et sélecteur de couleur personnalisé
- 10 formes prédéfinies : Carré, Arrondi, Cercle, Pilule, Haut arrondi, Bas arrondi, Gauche arrondie, Droite arrondie, Goutte et Organique
- Indicateurs visuels des valeurs de coin affichant le rayon exact de chaque coin
- Générateur de rayons aléatoires pour s’inspirer et expérimenter
- Plusieurs formats de sortie CSS : notation abrégée, propriétés individuelles, classe CSS et approximation Tailwind CSS
- Copie dans le presse-papiers en un clic pour une utilisation immédiate dans vos projets
- Curseurs avec affichage de la plage pour un réglage intuitif des valeurs
Comment utiliser le Générateur d’arrondis de bordure
- Sélectionnez votre unité : Choisissez px pour des tailles fixes, % pour une mise à l’échelle adaptative, ou em/rem pour un dimensionnement basé sur la typographie.
- Ajustez les valeurs des coins : Utilisez les curseurs pour régler le rayon de chaque coin individuellement, ou activez « Lier tous les coins » pour un arrondi uniforme.
- Essayez les formes prédéfinies : Cliquez sur l’une des 10 formes prédéfinies comme Cercle, Pilule ou Goutte pour appliquer instantanément des configurations courantes.
- Visualisez le résultat : Consultez l’aperçu en direct avec taille et couleur réglables pour voir exactement l’aspect de votre border-radius.
- Copiez le CSS : Cliquez sur Copier pour récupérer le code CSS border-radius, ou utilisez la section des autres formats pour les propriétés individuelles ou les classes Tailwind.
Cas d’usage
- Style des boutons : Créez des boutons en forme de pilule, des boutons d’appel à l’action légèrement arrondis ou des boutons d’icône entièrement circulaires.
- Composants de type carte : Appliquez des coins arrondis cohérents aux cartes, fenêtres modales et boîtes de dialogue de votre design system.
- Images d’avatar : Appliquez un border-radius de 50% à des images carrées pour créer des avatars et photos de profil parfaitement circulaires.
- Champs de saisie : Ajoutez un arrondi léger aux champs de formulaire, zones de texte et listes déroulantes pour un rendu moderne.
- Éléments de navigation : Stylisez les onglets, badges, étiquettes et éléments de navigation avec un arrondi adapté.
- Formes créatives : Combinez des valeurs de coin asymétriques pour créer des blobs organiques, des gouttes et des éléments décoratifs uniques.
- Design d’infobulles et de popovers : Appliquez un arrondi précis aux infobulles, popovers et menus déroulants.
- Design tokens adaptatifs : Établissez des valeurs de border-radius cohérentes dans tout votre projet avec les unités em ou rem.
Questions fréquentes
Cet outil est-il gratuit ?
Oui, le Générateur d’arrondis de bordure est entièrement gratuit et sans restriction. Vous pouvez l’utiliser autant de fois que vous le souhaitez, sans inscription ni paiement.
Mes données sont-elles en sécurité ?
Absolument. L’outil fonctionne entièrement dans votre navigateur. Aucune donnée n’est transmise à un serveur : vos réglages et le code CSS généré restent privés sur votre appareil.
Quelle est la différence entre px et % pour border-radius ?
Les valeurs en pixels (px) créent un rayon fixe, quelle que soit la taille de l’élément. Les valeurs en pourcentage (%) sont relatives aux dimensions de l’élément, ce qui les rend adaptatives. Par exemple, 50% sur un élément carré donne un cercle parfait.
Comment faire un cercle parfait en CSS ?
Définissez border-radius à 50% sur un élément dont la largeur et la hauteur sont égales. Le préréglage Cercle de cet outil applique exactement cette configuration.
Le border-radius est-il pris en charge par tous les navigateurs ?
Oui, la propriété CSS border-radius est entièrement prise en charge par tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Aucun préfixe constructeur n’est nécessaire.
Astuces et bonnes pratiques
- Utilisez des valeurs cohérentes : Définissez 2 à 3 valeurs de border-radius standard dans votre design system (par ex. 4px, 8px, 16px) pour une cohérence visuelle.
- Utilisez des pourcentages pour les cercles : Appliquez 50% à des éléments carrés pour obtenir des cercles parfaits qui s’adaptent automatiquement aux changements de taille.
- Restez discret pour les formulaires : De petites valeurs (2-8px) conviennent le mieux aux champs de saisie et aux éléments de formulaire pour garder un rendu net et professionnel.
- Essayez les coins asymétriques : Des valeurs différentes sur chaque coin créent des formes uniques qui donnent du caractère aux éléments décoratifs.
- Pensez aux unités adaptatives : Utilisez em ou rem pour des valeurs de border-radius qui évoluent proportionnellement à votre typographie.
- Testez avec du contenu : Vérifiez toujours le rendu des coins arrondis avec un vrai contenu dans l’élément, surtout à différentes tailles de fenêtre.