Dans cet article
Comprendre border-radius
La propriété CSS border-radius arrondit les coins du bord extérieur d'un élément. Elle accepte de une à quatre valeurs pour contrôler chaque coin indépendamment — haut-gauche, haut-droit, bas-droit et bas-gauche. Une seule valeur applique le même rayon aux quatre coins, tandis que quatre valeurs permettent de créer des formes asymétriques.
Border-radius fonctionne avec tout élément ayant des bordures, des arrière-plans ou des ombres visibles. La propriété découpe à la fois l'arrière-plan et la bordure selon la forme arrondie, et interagit correctement avec box-shadow, outline et overflow.
Créer des formes avec border-radius
En variant les valeurs de rayon, vous pouvez créer une large gamme de formes géométriques entièrement en CSS. Le générateur vous permet d'ajuster visuellement chaque coin et de voir immédiatement la forme résultante.
- Forme pilule — définissez border-radius à 9999px pour créer des extrémités entièrement arrondies comme un bouton capsule. C'est le modèle UI le plus courant pour les tags, badges et boutons pilule
- Cercle — appliquez border-radius: 50% à un élément carré (largeur et hauteur égales). Le pourcentage est calculé par rapport à chaque dimension, créant un cercle parfait
- Formes de feuilles et de taches — définissez deux coins opposés à des valeurs élevées et les deux autres à zéro (ex. border-radius: 60% 0 60% 0) pour créer des formes organiques
Essayez gratuitement — sans inscription
Générer le CSS Border Radius →Coins elliptiques avancés
Le raccourci border-radius supporte une syntaxe avec barre oblique (/) qui permet de définir des rayons horizontaux et verticaux séparés pour chaque coin. Cela crée des courbes elliptiques au lieu de circulaires.
- Syntaxe avec barre oblique — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% signifie que les rayons horizontaux sont tous à 50%, mais les rayons verticaux diffèrent, créant une forme d'œuf
- Propriétés de coin individuelles — border-top-left-radius: 50px 30px définit un coin elliptique avec 50px de rayon horizontal et 30px de rayon vertical
- Comportement des pourcentages — avec les pourcentages, le rayon horizontal est relatif à la largeur et le rayon vertical à la hauteur. Ainsi, 50% / 50% sur un rectangle crée une ellipse, pas un cercle
Questions fréquemment posées
Faut-il utiliser des pourcentages ou des pixels pour border-radius ?
Utilisez les pourcentages quand vous voulez que le rayon s'adapte à la taille de l'élément (cercles, ellipses). Utilisez les pixels pour un arrondi constant quelle que soit la taille (coins de boutons, cartes). Un modèle courant est 8px pour les composants UI et 50% pour les avatars.
Border-radius cause-t-il des problèmes de rendu sous-pixel ?
Sur les écrans haute résolution, de petites valeurs border-radius (1-2px) peuvent apparaître dentelées. C'est plus visible avec des bordures fines sur des fonds à faible contraste. Utiliser un rayon légèrement plus grand (3-4px minimum) peut améliorer la qualité.
Comment border-radius interagit-il avec les bordures et les contours ?
Border-radius arrondit le bord extérieur de la bordure. Si l'élément a une bordure épaisse, le rayon intérieur est calculé comme rayon-extérieur moins largeur-bordure. Les outlines ne suivent pas border-radius dans la plupart des navigateurs. Box-shadow suit la forme arrondie.