Border-radius CSS
Vous savez tracer une bordure nette autour d’une boîte. Souvent le design veut des coins plus doux — cartes amicales, boutons modernes, avatars lus comme des cercles. C’est border-radius : à quel point chaque coin s’arrondit.
Que fait border-radius ?
border-radius arrondit les coins de la boîte de bordure. La courbe s’applique à la bordure et au fond (et coupe souvent image/overflow). Une plus grande longueur donne un coin plus rond. Unités courantes : px ou %.
Une valeur — les quatre coins
Le départ quotidien : une longueur pour chaque coin.
Même rayon sur tous les coins
css.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}Ce que vous devez remarquer
La bordure suit la courbe et le remplissage blanc reste dans la forme arrondie. Le rayon n’est pas une seconde bordure — il forme la boîte existante.
Raccourci : combien de valeurs ?
Vous pouvez passer une, deux, trois ou quatre longueurs. L’ordre des coins est fixe.
📊 Nombre de valeurs border-radius
| Valeurs | Signification | Note quotidienne |
|---|---|---|
| 1 | Les quatre coins identiques | Cartes et panneaux doux |
| 2 | Haut-gauche + bas-droite, puis haut-droite + bas-gauche | Paires diagonales |
| 3 | Haut-gauche, haut-droite + bas-gauche, bas-droite | Moins courant — sachez que ça existe |
| 4 | Haut-gauche, haut-droite, bas-droite, bas-gauche | Contrôle total, sens horaire depuis haut-gauche |
Quatre coins, quatre nombres
Quand chaque coin veut sa propre courbe, listez quatre valeurs dans le sens horaire en partant du haut-gauche.
Quatre coins différents
css.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}Deux valeurs — paires diagonales
Deux longueurs associent les coins opposés : d’abord haut-gauche et bas-droite ; ensuite haut-droite et bas-gauche.
Rayon à deux valeurs en diagonale
css.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}Boutons pilule
Un grand rayon (souvent la moitié de la hauteur, ou une grosse valeur comme 999px) transforme un rectangle en pilule — courant pour chips et actions principales.
Bouton en forme de pilule
css.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}Avatars circulaires
Pour un vrai cercle, donnez à la boîte une largeur et une hauteur égales, puis border-radius: 50%. Sur une boîte non carrée, 50% produit une ellipse.
Cercle avec rayon 50 pour cent
css.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* découpe une photo dans le cercle */
}À vous de jouer
- Adoucissez une carte bordée avec
border-radius: 12px. - Stylez un badge avec quatre rayons de coins différents.
- Utilisez un rayon à deux valeurs sur une tuile et observez le couplage diagonal.
- Construisez un bouton pilule avec
border-radius: 999px. - Faites un avatar 64×64 avec
border-radius: 50%— puis essayez50%sur un rectangle large et comparez.
Erreurs fréquentes
- Mettre un rayon énorme sur une boîte vide sans bordure ni couleur et se demander pourquoi « rien ne se voit »
- Utiliser
50%sur un rectangle large et attendre un cercle parfait (vous obtenez une ellipse) - Oublier largeur et hauteur égales pour un cercle
- Croire que
border-radiusremplaceborder— il faut encore une bordure ou un fond pour bien voir la courbe - Mélanger l’ordre des coins (quatre valeurs : sens horaire depuis haut-gauche)
Résumé
border-radiusarrondit les coins de la boîte- Une valeur adoucit tous les coins ; quatre valeurs contrôlent chaque coin
- Deux valeurs associent les coins opposés en diagonale
- De grands rayons font des pilules ;
50%sur un carré fait un cercle - La courbe découpe bordure et fond ensemble
- Entraînez-vous à la carte, à la pilule et à l’avatar jusqu’à ce que les formes paraissent évidentes
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut