.svg)
Qu'est-ce que border-radius en CSS ?
La propriété border-radius permet d'arrondir les coins d'un élément HTML. Elle accepte une ou plusieurs valeurs définissant le rayon de courbure de chaque coin. C'est l'une des propriétés CSS les plus utilisées en web design moderne pour adoucir les formes rectangulaires des blocs, boutons, cartes et images.
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
Comment fonctionne border-radius ?
La syntaxe permet de définir un rayon uniforme ou des rayons différents pour chaque coin. Avec une seule valeur, tous les coins sont identiques. Avec quatre valeurs, on contrôle chaque coin individuellement (haut-gauche, haut-droit, bas-droit, bas-gauche). La valeur 50% transforme un carré en cercle parfait.
Cas d'usage courants
Le border-radius est omniprésent en UI design : boutons avec coins arrondis, avatars circulaires, cartes avec angles doux, badges et tags, et inputs de formulaires stylisés. Combiné avec overflow: hidden, il permet de découper des images en formes arrondies sans toucher au fichier source.
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
Conclusion
Border-radius est une propriété CSS simple mais essentielle pour tout design web moderne. Elle améliore l'esthétique des interfaces en adoucissant les formes, et sa compatibilité universelle avec les navigateurs en fait un incontournable du toolkit de tout designer ou développeur front-end.
À retenir
- Propriété CSS pour arrondir les coins des éléments HTML
- Accepte 1 à 4 valeurs pour contrôler chaque coin
- 50% transforme un carré en cercle
- Compatible avec tous les navigateurs modernes
- Utilisé pour boutons, avatars, cartes et images
Demandes illimitées, résultats rapides
Soumettez autant de briefs que vous le souhaitez. Nos plans vous permettent de gérer un flux continu de demandes design, sans limite et sans friction, et à un coût économique.
