Bordures arrondies

La propriété border-radius permet d'arrondis les angles des éléments de type block

sélecteur {
   border-radius: Xpx;
}

Remplacez X par la valeur de votre arrondi. Plus le chiffre sera grand, plus l'arrondis sera important.

Vous pouvez définir une valeur d'arrondi différente pour chacun des angles

sélecteur {
   border-radius: Xpx Xpx Xpx Xpx;
}

Les valeurs sont lues dans le sens horaire, en commençant par l'angle en haut à gauche. Ainsi :

Premier X => en haut à gauche.
Deuxième X => en haut à droite.
Troisième X => en bas à droite.
Quatrième X => en bas à gauche. 

Vous pouvez également créer des arrondis de forme ovale en modifiant la valeur en X (horizontal) et Y (vertical)

sélecteur {
   border-radius: Xpx / Ypx;
}

/!\ N'oubliez pas le "/" entre les deux valeurs

De la même façon, vous pouvez traiter chacun des angles séparément :

sélecteur {
   border-radius: Xpx Xpx Xpx Xpx / Ypx Ypx Ypx Ypx;
}

Retour aux Propriétés