Créer des coins arrondis avec CSS3
CSS3 permet de créer des coins arrondis. La syntaxe est assez simple:
.coins-arrondis {
border-radius: 10px;
}
Il est également possible de spécifier des rayons différents pour chaque coin, et un rayon horizontal et vertical différent:
.coins-arrondis {
/* border-top-left-radius: rayon-horizontal rayon-vertical */
border-top-left-radius: 20px 10px;
border-bottom-right-radius: 20px 10px;
}
border-top-left-radius: 20px 10px;
border-bottom-right-radius: 20px 10px;
Le tout peut même être configuré en une seule ligne:
.coins-arrondis {
/* border-radius: rayon horizontal haut-gauche haut-droite bas-droite bas-gauche / rayon vertical;
(autrement dit, dans le sens des aiguilles d'une montre) */
border-radius: 5px 10px 15px 20px / 10px 10px 10px 10px;
}
border-radius: 5px 10px 15px 20px / 10px 10px 10px 10px;
