Utilisation et Syntaxe de Border-Radius
Objectifs
Les objectifs de cette vidéo incluent la compréhension de la propriété border-radius, son application pratique pour arrondir les coins des éléments, et la gestion de la compatibilité entre les navigateurs.
Résumé
Découvrez comment la propriété border-radius peut transformer un carré en lui ajoutant des coins arrondis.
Description
Dans cette leçon, nous explorons en détail la propriété CSS border-radius qui permet d'ajouter des coins arrondis à des éléments HTML. Après avoir dessiné un carré bleu sur la page, nous appliquons diverses configurations de la propriété border-radius pour illustrer son utilité. Vous apprendrez à arrondir un seul coin, plusieurs coins de manière asymétrique, ou tous les coins uniformément. Nous abordons aussi la compatibilité avec les navigateurs modernes, mentionnant brièvement l'usage des préfixes -webkit-
et -moz-
pour maximiser le support des anciens navigateurs. Cette leçon est indispensable pour ceux désirant enrichir visuellement leurs pages web en maîtrisant les subtilités de cette propriété CSS polyvalente.
Questions - réponses
border-radius: 10px;
, où 10px représente le rayon d'arrondissement.
border-radius: 10px 0 0 10px;
, ce qui ajoute un rayon de 10px aux coins supérieur gauche et inférieur droit.
Dommage.