Générateur de Border-Radius CSS

Contrôles

Aperçu

Sortie CSS

 
   
 
 
  
 
 
 
Comment l'utiliser
 
     
  1. Lier ou séparer — Activez « Tous les coins » pour arrondir uniformément, ou réglez chaque coin indépendamment.
    2.  
  2. Définissez les valeurs — Faites glisser les curseurs ou saisissez une valeur par coin.
    3.  
  3. Choisissez une unité — px pour une interface fixe, % pour des formes adaptables, rem pour un arrondi relatif à la typographie.
    4.  
  4. Copiez & collez — Utilisez « Copier la version abrégée » pour une ligne ou « Copier la version détaillée » pour chaque coin.
    5.  
 
 
 
Qu'est-ce que CSS border-radius ?
 
border-radius arrondit les coins d'un élément avant le rognage des arrière-plans et bordures. Une valeur arrondit tous les coins ; jusqu'à quatre valeurs ciblent chaque coin dans le sens horaire depuis le haut-gauche.
 
Les pourcentages sont relatifs à la taille de l'élément — 50% sur un carré crée un cercle. Pris en charge universellement par les navigateurs modernes.
 
 
 
Cas d'usage courants
 
 
Cartes arrondies
 
Avatars circulaires
 
Boutons en pilule
 
Coins asymétriques
 
Rognage de photos
 
Bulles de dialogue
 
 
Conseils & bonnes pratiques
 
 
 Ordre de la version abrégée 
Haut-gauche, haut-droite, bas-droite, bas-gauche — sens horaire depuis le haut-gauche.
 
 
 Cercles parfaits 
Largeur et hauteur égales + border-radius: 50%. C'est tout.
 
 
 Astuce forme pilule 
Utilisez 9999px pour les extrémités en pilule sans calculer la moitié de la hauteur de l'élément.
 
 
 Cartes imbriquées 
Les cartes internes rendent mieux avec un rayon légèrement plus petit que la carte externe.
 
 
 
Questions fréquentes
 
 
Quel est l'ordre de la version abrégée de border-radius ?
 
Quatre valeurs : haut-gauche, haut-droite, bas-droite, bas-gauche. Deux valeurs : paires diagonales. Une valeur : tous les coins égaux.
 
 
 
Dois-je utiliser px, % ou rem ?
 
px pour des composants cohérents. % pour un arrondi adaptable (cercles, cartes fluides). rem pour suivre la taille de police racine.
 
 
 
Pourquoi mon image reste-t-elle carrée ?
 
Appliquez le rayon directement sur l'img, ou utilisez un conteneur avec overflow: hidden. Un rayon sur le parent seul peut ne pas rogner les enfants.
 
 
 
Puis-je faire des coins elliptiques ?
 
Oui. Utilisez la syntaxe avec barre oblique : border-radius: 40px / 20px pour des rayons horizontaux et verticaux différents.
 
 
 
border-radius fonctionne-t-il dans tous les navigateurs ?
 
Oui. Pris en charge partout où le CSS moderne fonctionne, y compris Safari mobile. Utilisez la version détaillée si la version abrégée à unités mixtes est ignorée.