Générateur de Bordure CSS : Créez des Coins Arrondis Visuellement
Besoin de coins arrondis sur une carte, un bouton ou un avatar ? Le CSS Border Radius Generator vous permet de créer visuellement des valeurs de border-radius : utilisez une valeur pour tous les coins ou définissez chaque coin séparément, choisissez px ou %, et copiez le CSS d'un simple clic.
Exemple : Choisissez le préréglage "Moyen" pour 8px sur tous les coins, ou "Cercle" pour 50% (parfait pour les avatars carrés). Utilisez "Par coin" pour arrondir uniquement le haut (par exemple, les modaux) ou le bas (par exemple, les feuilles inférieures). Changez l'arrière-plan de l'aperçu pour voir clairement la forme. Copiez le CSS et collez-le dans votre feuille de style.
Qu'est-ce que le border-radius ?
border-radius est une propriété CSS qui arrondit les coins de la boîte de bordure d'un élément. Vous pouvez définir une valeur pour les quatre coins ou définir chaque coin séparément (haut-gauche, haut-droit, bas-droit, bas-gauche). Les valeurs peuvent être en px (taille fixe) ou % (relative à l'élément) — 50% sur un carré fait un cercle.
Pourquoi utiliser un générateur de border radius ?
Retour visuel — Voir la forme arrondie sur une boîte d'aperçu avant de copier le code.
Contrôle par coin — Arrondissez uniquement certains coins (par exemple, uniquement le haut pour les modaux) sans mémoriser l'ordre des quatre valeurs.
Unités — Alternez entre px et % ; utilisez des préréglages comme Pilule (9999px) ou Cercle (50%) et ajustez à partir de là.
Préréglages — Aucun, Petit, Moyen, Grand, XL, Pilule, Cercle, Haut seulement, Bas seulement.
Pas d'inscription — Gratuit, côté client, et fonctionne hors ligne une fois la page chargée.
Comment fonctionne l'outil
- Utilisez l'aperçu pour voir le border radius actuel (et changez éventuellement l'arrière-plan de l'aperçu).
- Choisissez "Tous les coins identiques" pour une valeur, ou "Par coin" pour quatre valeurs (haut-gauche, haut-droit, bas-droit, bas-gauche).
- Choisissez l'unité : px ou %.
- Copiez le CSS de la sortie et collez-le dans votre projet.
- Essayez les préréglages (par exemple, Cercle, Pilule, Haut seulement) pour démarrer un style.
Syntaxe : une valeur s'applique à tous les coins ; quatre valeurs vont dans le sens des aiguilles d'une montre à partir du haut-gauche.
Cas d'utilisation
Cartes et panneaux — Coins légèrement arrondis (par exemple, 8px) pour un look moderne.
Boutons — Petit rayon pour les boutons ou forme de pilule pour des pilules pleine largeur.
Avatars et icônes — 50% sur un élément carré pour un cercle.
Modaux et feuilles — Coins supérieurs arrondis uniquement, ou bas uniquement, pour des superpositions attachées.
Questions Fréquemment Posées
Quand devrais-je utiliser px vs % ?
Utilisez px pour un arrondi fixe (par exemple, 8px sur des cartes). Utilisez % lorsque vous souhaitez que le rayon s'adapte à l'élément — 50% sur un carré donne un cercle ; sur un rectangle, cela donne des extrémités en forme de pilule.
Qu'est-ce qu'une forme de pilule ?
Une pilule est un rectangle avec des extrémités courtes entièrement arrondies. Utilisez une grande valeur (par exemple, 9999px) ou 50% afin que le rayon soit au moins la moitié de la longueur du côté, donnant des extrémités semi-circulaires.
Essayez le CSS Border Radius Generator
CSS Border Radius Generator
Generate CSS border-radius values visually. Set one value for all corners or per-corner radii in px or %. Copy the CSS instantly.
The CSS Border Radius Generator is free, works in your browser, and requires no sign-up. Choose all-corners or per-corner, set px or %, try presets, and copy the CSS with one click — perfect for cards, buttons, avatars, and modals.
Related Tools
- CSS Box Shadow Generator — Create box-shadow values visually
- Gradient Generator — Create linear, radial, and conic CSS gradients
- Color Contrast Checker — Check contrast ratios for accessibility
- Font Pairing — Preview and test typography combinations