Générateur de border-radius
Composez visuellement des formes CSS border-radius et copiez le code.
Prochaines étapes recommandées
Outils associés
Convertissez des couleurs entre HEX, RGB et HSL, et vérifiez le contraste WCAG.
Testez une expression régulière sur du texte et voyez les correspondances et les groupes de capture.
Encodez ou décodez du texte en base64 et inversement, avec une variante compatible URL.
Questions fréquentes
Appliquez la propriété border-radius à un élément. Une valeur unique comme border-radius: 12px; arrondit les quatre coins de manière identique. Faites glisser les curseurs ici, observez l'aperçu en direct et copiez la déclaration générée directement dans votre feuille de style.
La barre oblique sépare les rayons horizontaux des rayons verticaux, produisant des coins elliptiques plutôt que circulaires. La forme est border-radius : h-tl h-tr h-br h-bl / v-tl v-tr v-br v-bl. Activez « Coins elliptiques » pour régler chaque axe indépendamment et l'outil écrit la syntaxe avec barre oblique pour vous.
Les pixels donnent un rayon de coin fixe quelle que soit la taille de l'élément, idéal pour les boutons et les cartes. Les pourcentages sont relatifs aux dimensions de l'élément — 50 % sur un carré le transforme en cercle, pratique pour les pastilles et les avatars qui doivent s'adapter. Changez d'unité en haut de l'outil.
Non. Le générateur fonctionne entièrement dans votre navigateur. L'aperçu est rendu localement avec du CSS simple et rien de ce que vous saisissez n'est envoyé à un serveur ni stocké.
Dernière mise à jour le 2026-06-23.