Qu'est-ce que CSS Border Radius ?
La propriété CSS border-radius arrondit les coins d'un élément. Vous pouvez définir les quatre coins de manière uniforme ou contrôler individuellement chaque coin pour créer des formes créatives comme des pilules, des cercles ou des designs organiques en forme de goutte.
Motifs de Border Radius courants
- Forme de pilule : Définissez border-radius à la moitié de la hauteur de l'élément (par exemple,
border-radius: 9999px). - Cercle : Utilisez
border-radius: 50%sur un élément carré. - Arrondi subtil : Petites valeurs comme 4-8px pour les coins des cartes et les boutons.
Questions fréquemment posées
Puis-je utiliser des pourcentages pour border-radius ?
Oui. Les valeurs en pourcentage sont relatives aux dimensions de l'élément. 50% sur un élément carré crée un cercle parfait. Sur les éléments non carrés, cela crée une ellipse.
Border-radius fonctionne-t-il avec les images ?
Oui. Appliquez border-radius directement aux éléments <img> ou à leur conteneur pour créer des formes d'image arrondies. Combinez avec overflow: hidden pour des bords propres.