Des coins parfaitement carrés à des coins légèrement arrondis, une carte moderne change d'allure en une seule ligne de CSS. border-radius est l'une des propriétés au meilleur rapport entre l'effort d'écriture et l'impact visuel, capable d'aller du léger galbe discret jusqu'au cercle parfait d'un avatar.
Sa syntaxe la plus simple tient en une valeur, mais elle cache un ordre de coins différent de celui de margin ou padding, une écriture elliptique méconnue, et un piège fréquent avec le contenu qui déborde des coins arrondis.
Définition
border-radius arrondit les quatre angles d'une boîte, en s'appliquant automatiquement au fond de l'élément, à sa border et à toute box-shadow qu'elle porte.
.carte {
border-radius: 12px;
}Une seule valeur, appliquée aux quatre coins identiquement : douze pixels de rayon, un arrondi discret et courant sur une carte d'interface moderne.
Un rayon différent par coin
Comme margin et padding, border-radius accepte jusqu'à quatre valeurs, mais dans un ordre différent : il commence en haut à gauche et tourne dans le sens horaire par coin, non par côté.
| Valeurs | Ordre |
|---|---|
| 1 | Les quatre coins identiques |
| 2 | Haut-gauche et bas-droite, puis haut-droite et bas-gauche |
| 4 | Haut-gauche, haut-droite, bas-droite, bas-gauche |
.notification {
border-radius: 12px 12px 0 12px;
}Chaque coin reste aussi réglable individuellement avec border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius, utile quand un seul coin doit varier selon un état.
border-radius s'anime aussi très bien avec transition, un moyen simple d'adoucir un changement de forme au survol ou à l'ouverture d'un panneau, sans jamais provoquer de saccade visible à l'écran.
La syntaxe elliptique avec le signe /
Une barre oblique dans la valeur sépare deux jeux de rayons, l'un horizontal et l'autre vertical, ce qui permet de créer des coins étirés plutôt que parfaitement circulaires.
.forme-organique {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}Peu utilisée au quotidien, cette écriture sert surtout à dessiner des formes décoratives non géométriques, comme des taches ou des feuilles stylisées, sans jamais recourir à une image.
Le cercle parfait avec 50%
Sur un élément carré, dont la largeur et la hauteur sont strictement identiques, border-radius: 50% dessine un cercle parfait. C'est la technique standard pour un avatar rond.
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}Sur un rectangle, la même valeur produit une ellipse, pas un cercle : vérifier que width et height sont bien égaux évite l'erreur la plus fréquente sur ce motif. Ajouter object-fit: cover sur une image contenue dedans évite ensuite qu'elle s'écrase au lieu de se recadrer proprement.
Le même piège touche un badge ou une pastille de notification : dès que son contenu texte varie en longueur, une largeur fixée en dur casse le cercle. Une largeur minimale associée à un padding symétrique le préserve, quel que soit le nombre affiché à l'intérieur.
Associer border-radius à une ombre ou à un enfant
border-radius s'applique automatiquement à border et à box-shadow, sans réglage supplémentaire : les deux épousent la forme arrondie sans qu'on ait besoin d'y penser. Le contenu qui déborde de la boîte, lui, se comporte différemment.
Une image ou un enfant plus grand que sa carte continue de dépasser les coins arrondis, formant des angles carrés visibles par-dessus l'arrondi du parent. La seule correction fiable est overflow: hidden sur le conteneur, qui force tout ce qui dépasse à se découper exactement selon la forme arrondie.
Questions fréquentes
border-radius arrondit-il aussi les bordures et les ombres ?
Oui, automatiquement : border et box-shadow suivent toujours la forme définie par border-radius, sans aucune propriété supplémentaire à ajouter pour les synchroniser.
Comment empêcher une image de dépasser des coins arrondis de sa carte ?
En ajoutant overflow: hidden sur le conteneur qui porte le border-radius. Sans cette règle, le fond et la bordure sont bien arrondis, mais tout élément enfant plus grand continue de déborder avec des angles droits.
À quoi sert une valeur comme border-radius: 9999px ?
C'est une astuce courante pour obtenir une forme en pilule, aux extrémités parfaitement rondes, sans calculer la moitié exacte de la hauteur de l'élément. Une valeur volontairement énorme se plafonne automatiquement au maximum possible, et reste donc valable même si la hauteur change ensuite.