La propriété CSS3 border-radius permet de faire des coins arrondis pour rendre nos pages web plus jolies à regarder. Tous les navigateurs ne prennent pas en charge la propriété CSS3 border-radius : les agents utilisateurs carburant au moteur de rendu Webkit (Chrome, Safari, iPhone, Android) utilisent -webkit-border-radius et ceux qui tournent sur Gecko (Firefox, Camino) utilisent -moz-border-radius. Quant à Internet Explorer, on peut garder l’espoir qu’avec IE9 ont verra un peu de lumière au bout du tunnel…

Pour assurer une compatibilité maximum, il faut utiliser plein de déclarations CSS redondantes et c’est fastidieux. Heureusement, jacob bijani (Directeur de la création de Tumblr et à l’origine de start.io) a développé un générateur de coins arrondis qui s’appelle… border-radius.com ;)

Des coins arrondis différents à chaque angle

Il est possible de spécifier les coins arrondis pour Webkit, Gecko et CSS3 en cochant les cases appropriées

Un générateur de coins arrondis en CSS3

Exemple de coins arrondis en haut mais pas en bas

.roundies-top {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px; /* pour Chrome /
    -webkit-border-top-right-radius: 5px; / pour Chrome */
    border-radius: 5px 5px 0 0;
}

Google Chrome n’accepte pas les raccourcis : il faut ajouter explicitement chaque coins arrondis.

Exemple de coins arrondis identiques

Le générateur n’utilise pas la syntaxe raccourcie qui permet de gagner quelques lignes. Pour avoir des coins arrondis identiques pour les 4 angles avec une écriture plus concise on peut utiliser :

.rounded-all {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Pour terminer

Je vous conseille la lecture de Créer des coins arrondis en CSS et sans images pour plus d’informations, notamment en ce qui concerne Internet Explorer avec du Javascript et du composant .htc en veux-tu en voilà !