Passer au contenu principal

Générateur de Border Radius CSS

Outil gratuit en ligne pour créer visuellement CSS border-radius et copier le code.

Preview

Mode

Rayon

px

Code CSS

border-radius: 20px;

Préréglages

Fonctionnalités Principales​

  • 2 Modes: Mode tout, Mode coins individuels
  • Aperçu en Temps Réel: Voir les changements instantanément
  • Contrôle Fin: Plage de 0-200px
  • 9 Préréglages: Styles arrondis courants
  • Copie en Un Clic: Copier le code CSS instantanément

Qu'est-ce que Border Radius?​

border-radius est une propriété CSS qui arrondit les coins des éléments.

Syntaxe de Base​

/* Tous les coins égaux */
border-radius: 10px;

/* Coins individuels */
border-radius: 10px 20px 30px 40px;
/* Ordre: haut-gauche, haut-droite, bas-droite, bas-gauche */

Styles Prédéfinis​

Square (Carré)​

border-radius: 0px;

Coins nets, design classique

Slightly Rounded (Légèrement Arrondi)​

border-radius: 4px;

Arrondi subtil, sensation raffinée

Rounded (Arrondi)​

border-radius: 8px;

Arrondi modéré, le plus polyvalent

Very Rounded (Très Arrondi)​

border-radius: 16px;

Sensation douce, design convivial

Pill (Pilule)​

border-radius: 50px;

Parfait pour les boutons et les étiquettes

Circle (Cercle)​

border-radius: 9999px; /* ou 50% */

Images de profil, icônes

Top Only (Haut Seulement)​

border-radius: 12px 12px 0 0;

En-têtes de modal, hauts de cartes

Bottom Only (Bas Seulement)​

border-radius: 0 0 12px 12px;

Pieds de modal, menus déroulants

Blob (Forme Organique)​

border-radius: 30px 60px 30px 60px;

Formes organiques, design unique

Compatibilité des Navigateurs​

  • ✅ Chrome 5+
  • ✅ Firefox 4+
  • ✅ Safari 5+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ Tous les navigateurs mobiles

Outils Associés​