Comprendre la propriété CSS border-radius
La propriété CSS border-radius permet d'arrondir les coins d'un élément. La syntaxe courte accepte une seule valeur (tous les coins identiques) ou quatre valeurs (haut-gauche, haut-droit, bas-droit, bas-gauche, dans le sens horaire). Les valeurs peuvent être en pixels (arrondi fixe) ou en pourcentage (proportionnel à la taille de l'élément). Un border-radius de 50% sur un élément carré crée un cercle parfait. La syntaxe complète permet même de définir des rayons elliptiques avec la notation "horizontal / vertical".
Border-radius et design d'interface
Les coins arrondis sont omniprésents dans le design d'interface moderne. Apple a popularisé les rectangles à coins arrondis (squirclés) dans iOS. Les boutons, cartes, modales, champs de formulaire et images de profil utilisent presque tous du border-radius. Des valeurs de 4-8px donnent un aspect professionnel et subtil. Des valeurs de 12-24px créent un aspect plus doux et amical. Le border-radius à 50% (cercle) est standard pour les avatars. Le border-radius asymétrique (coins différents) peut créer des formes organiques intéressantes pour se démarquer.