Avant la prise en charge du CSS3 par les navigateurs, la création de blocs aux coins arrondis nécessitait l’utilisation créative d’images de fond, de bordures et de positionnement.
Heureusement, cette époque est révolue. Aujourd’hui, les navigateurs prennent en charge le HTML5 et CSS3 et ses propriétés de border-radius.
Les propriétés border-radius permettent d’arrondir facilement les coins d’une boîte.
Arrondir les 4 coins
Les propriétés border-radius de la bordure fonctionnent en courbant le coin selon un cercle dont le centre est décalé du coin de la boîte de la distance que vous spécifiez.
Pour créer une simple boîte aux coins arrondis, ajoutez la propriété border-radius à la boîte 1.
#box1 {
-moz-border-radius: 25px; /* pour Mozilla */
-khtml-border-radius: 25px; /* pour Safari et Chrome */
-webkit-border-radius: 25px; /* pour Safari sur Mac */
border-radius: 25px; /* CSS3 */
}
La propriété « border-radius » est une propriété abrégée qui fixe le rayon pour les quatre coins de la boîte à la même valeur lorsqu’on lui donne une seule valeur.
Arrondir chaque coin individuellement
Pour changer la courbure des coins en différentes valeurs, vous pouvez définir plus d’une valeur, les valeurs étant séparées par des espaces.
La première valeur représente le coin supérieur gauche, la deuxième représente le coin supérieur droit, la troisième représente le coin inférieur droit et la quatrième représente le coin inférieur gauche.
Ajoutez le rayon de bordure suivant à la boite 2.
#box2 {
-moz-border-radius: 10px 140px 30px 140px; /* pour Mozilla */
-khtml-border-radius: 10px 140px 30px 140px; /* pour Safari et Chrome */
-webkit-border-radius: 10px 140px 30px 140px; /* pour Safari sur Mac */
border-radius: 10px 140px 30px 140px; /* CSS3 */
}
/* Explication */
border-radius: haut gauche - haut droit - bas droit - bas gauche
Dans votre navigateur, les deux boites devraient ressembler à ceci :
