Accueil    CSS    Propriété border-radius
 



style css border-radius  Style CSS border-radius

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété border-radius permet d'arrondir les angles de la bordure d'un élément. Il est possible de définir ce style de façon globale pour les quatre angles ( soit par une valeur unique pour les 4 angles soit par quatre valeurs spécifiques en partant de l'angle haut gauche pour finir avec l'angle bas gauche) ou de spécifier une valeur pour chacun d'eux :
    - border-top-left-radius
    - border-top-right-radius
    - border-bottom-left-radius
    - border-bottom-right-radius

Il est possible en utilisant ce style de réaliser des élément de forme circulaire en partant d'un élément de forme carré et en lui définissant un rayon valant la moitié de sa largeur (une division de 100 pixels sur 100 pixels avec un rayon de bordure de 50 pixels par exemple).

Même si la bordure est définie avec des angles arrondis, la propriété outline aura toujours un rendu rectangulaire.



Propriétés pour le style border-radius :




Propriété Définition Valeurs CSS
border-radius Défini la valeur du rayon de l'arrondi des angles d'un élément valeur (px, em ...)
%
CSS 3
border-top-left-radius Valeur de l'arrondi de l'angle supérieur gauche d'un élément valeur (px, em ...)
%
CSS 3
border-top-right-radius Valeur de l'arrondi de l'angle supérieur droit d'un élément valeur (px, em ...)
%
CSS 3
border-bottom-right-radius Valeur de l'arrondi de l'angle inférieur droit d'un élément valeur (px, em ...)
%
CSS 3
border-bottom-left-radius Valeur de l'arrondi de l'angle inférieur gauche d'un élément valeur (px, em ...)
%
CSS 3


Exemple d'utilisation du style css border-radius :





<div style="width:450px; height:60px; border-radius:10px; border:solid 3px green;
text-align:center; line-height:30px;">
   Angles arrondis avec un rayon de 10 pixels
   <br />et une bordure d'épaisseur 3 pixels
</div>

<div style="width:450px; height:200px; border-radius:10px 30px 60px 100px; border:solid 1px black;
    text-align:center; line-height:200px;">
   div arrondie avec une valeur pour chaque angle
</div>

<div style="width:200px; height:200px; border-radius:100px; border:solid 2px black;
   text-align:center; line-height:200px;">
   div cercle
</div>




Angles arrondis avec un rayon de 10 pixels
et une bordure d'épaisseur 3 pixels


div arrondie avec une valeur pour chaque angle


div cercle