Créer des coins arrondis en CSS3

Page 1 / 1

Pour créer des coins arrondis, vous devez utiliser la propriété CSS3 appelée "border-radius".
Pour une meilleure compatibilité avec les différents navigateurs, nous vous conseillons d'utiliser les préfixes suivants :

  • -o- pour Opera
  • -moz- pour Gecko (Mozilla)
  • -webkit- pour Webkit (Chrome, Safari, Android...)
  • -ms- pour Microsoft (Internet Explorer)

 

Dans l'exemple ci-dessous, le bloc avec une classe "coins_arrondis_identiques" aura tous ses coins arrondis, d'un rayon de "20px".

CSS

.coins_arrondis_identiques{
  -o-border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
}
 

 

Pour utiliser des rayons différents, vous devez les spécifier dans cet ordre :

  • Coin supérieur gauche
  • Coin supérieur droit
  • Coin inférieur droit
  • Coin inférieur gauche

Ce qui donnera par exemple ceci :

CSS

.coins_arrondis_differents{
  -o-border-radius: 5px 10px 15px 20px;
  -moz-border-radius: 5px 10px 15px 20px;
  -webkit-border-radius: 5px 10px 15px 20px;
  -ms-border-radius: 5px 10px 15px 20px;
  border-radius: 5px 10px 15px 20px;
}
 

 

Note : Testé sous Firefox; Google Chrome, IE et Opera