border-radius
Arrondit les coins d’un élément.
- Valeur initiale
0- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- tous les éléments sauf les tableaux avec border-collapse: collapse
- JavaScript
element.style.borderRadius = "12px"
Exemple
#.avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
}
.pill {
border-radius: 999px;
padding: 4px 12px;
}<div class="stage" style="display: flex; align-items: center; gap: 12px;">
<img class="avatar" src="/collections/covers/vibe-coding.webp" alt="">
<span class="pill" style="background: #312e81;">Niveau 7</span>
</div>Définition et utilisation
#La propriété border-radius arrondit les coins d’un élément. Elle agit sur le fond, la bordure et l’ombre, même si l’élément n’a aucune bordure.
Une valeur arrondit tous les coins de façon identique, quatre valeurs définissent dans l’ordre le coin supérieur gauche, supérieur droit, inférieur droit et inférieur gauche. La notation avec une barre oblique, par exemple 50% / 20%, permet de créer des coins elliptiques.
Une valeur de 50% sur un élément carré donne un cercle, et une très grande valeur en pixels (par exemple 999px) sur un rectangle donne une forme de pilule, quelle que soit sa largeur.
Syntaxe
#border-radius: <rayon> (1 à 4 valeurs) [ / <rayon> (1 à 4 valeurs) ]?;Valeurs
#- Des coins nets et rectangulaires.
<longueur>
Des coins légèrement arrondis.<pourcentage>
Donne un cercle sur un carré.deux valeurs
Les coins supérieur gauche et inférieur droit sont fortement arrondis, les autres légèrement.coins elliptiques
Des rayons différents en horizontal et en vertical.
Valeurs en pratique
#0
.demo { border-radius: 0; }12px
.demo { border-radius: 12px; }50%
.demo { border-radius: 50%; }32px 4px
.demo { border-radius: 32px 4px; }50% / 20%
.demo { border-radius: 50% / 20%; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Une image dans un conteneur arrondi dépasse de ses coins. Ajoutez
overflow: hiddenau parent, ou appliquez le rayon directement à l’image. - Des arrondis imbriqués sont les plus réussis quand le rayon intérieur est égal au rayon extérieur moins l’écart qui les sépare.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.