Créer des cercles avec CSS3 avec support multi-navigateurs

Lorsqu’on est graphiste web on peut être amené à utiliser des formes à bordures arrondies dans les créations. Mais voilà au moment de passer à l’intégration de la maquette pour créer le site internet, l’intégrateur Web doit utiliser la propriété appelée border-radius : faire des cercles n’a jamais été aussi facile qu’avec CSS3.

Voici la propriété CSS avec la valeur qui rend éléments ressemblant à un cercle :

border-radius: 50%;

Par exemple, si vous voulez faire un élément qui ressemble à un cercle sa hauteur et la largeur doivent être égaux. Si la hauteur et la largeur de l’élément ne sont pas égaux, vous obtiendrez un ovale.

img { border-radius: 50%; }

Pour le support multi-navigateurs le modèle doit être complété par des préfixes différents suivant le fournisseur de border-radius propriété CSS et PIE. Ajoutant ainsi le support pour les anciennes versions de navigateurs tels que Safari, Chrome, Firefox et autres. PIE ajoute le support pour IE7 et IE8, et avant qu’il ne commence son travail le PIE doit être ajouté à un site Web tel que décrit dans l’article suivant: CSS3: Progressive Internet Explorer (PIE).

Voici styles finales avec support multi-navigateurs:

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
behavior: url(PIE.htc);

Voyons comment ils fonctionnent avec des éléments div:

div { 
   -webkit-border-radius: 50%; 
   -moz-border-radius: 50%; 
   -khtml-border-radius: 50%; 
   border-radius: 50%; 
   background-color: red; 
   width: 200px; 
   height: 200px; 
   position: relative; 
   behavior: url(PIE.htc);
}

SOURCE : Article sur BASICuse