Générateur de border-radius CSS
Réglez les coins arrondis visuellement : liez tous les coins ou ajustez chacun, en px ou en %, créez des cercles et des formes organiques, puis copiez le code CSS, SCSS ou Tailwind.
Chargement de Générateur de border-radius CSS…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur de border-radius CSS
- 1
Ouvrez Générateur de border-radius CSS sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
La propriété CSS border-radius arrondit les coins des blocs, boutons, cartes et images. Ce générateur de border-radius vous permet de déplacer des curseurs et de voir la forme changer dans un aperçu en direct, puis de copier le code. Liez les quatre coins pour un arrondi uniforme, ou déliez-les pour modeler chaque coin séparément, des cartes discrètes aux cercles parfaits et aux formes organiques.
Comment l'utiliser
- Déplacez le curseur pour arrondir tous les coins d'un coup, ou déliez les coins et réglez-les un par un.
- Passez de px pour un arrondi fixe à % pour des formes qui suivent la taille de l'élément.
- Utilisez les préréglages : carré, arrondi, cercle et plus, ou un tirage aléatoire pour un blob.
- Changez la couleur du bloc et le fond de l'aperçu pour coller à votre design.
- Copiez le code CSS, SCSS ou Tailwind.
Formes courantes
| Forme | CSS |
|---|---|
| Carte discrète | border-radius: 8px; |
| Bouton pilule | border-radius: 9999px; |
| Cercle (élément carré) | border-radius: 50%; |
| Un seul coin arrondi | border-radius: 0 24px 0 0; |
| Feuille | border-radius: 0 50% 0 50%; |
Conseils
- Les valeurs en pourcentage suivent la taille de l'élément, donc la forme reste identique sur tous les écrans.
- Éléments imbriqués : donnez à l'élément intérieur un rayon plus petit que son parent (rayon extérieur moins le padding) pour des courbes régulières.
- Les images ont besoin de overflow: hidden sur le parent, ou du rayon directement sur la balise img.
- Restez cohérent : utilisez deux ou trois tailles de rayon dans tout votre design system.
Ajoutez de la profondeur avec le générateur d'ombres CSS et construisez vos mises en page avec le générateur Flexbox.
Questions fréquentes
Comment faire un cercle en CSS ?
Donnez à un élément carré border-radius: 50%. Sur un rectangle, la même valeur crée une ellipse.
Puis-je arrondir seulement certains coins ?
Oui. Déliez les coins et réglez chacun, ou utilisez la syntaxe à quatre valeurs : haut gauche, haut droit, bas droit, bas gauche.
Faut-il utiliser px ou % ?
Utilisez px pour un arrondi constant sur les boutons et les cartes, et % pour des formes qui doivent suivre la taille de l'élément, comme les cercles.
Comment faire un bouton en forme de pilule ?
Utilisez un très grand rayon, par exemple 9999px. Les coins deviennent entièrement ronds quelle que soit la hauteur du bouton.
Puis-je obtenir des classes Tailwind ?
Oui. Choisissez l'export Tailwind pour obtenir les classes rounded ou des valeurs arbitraires correspondant à votre forme.
Le border-radius fonctionne-t-il sur les images ?
Oui. Appliquez-le à l'élément img, ou à un parent avec overflow: hidden.