Des coins arrondis en CSS dans tous les navigateurs
En CSS3, il existe une propriété border-radius qui sert spécifiquement à arrondir les coins de boîtes de contenu. Évidemment, la majorité des navigateurs populaires ne le supportent pas encore.
J'ai découvert ce matin une solution très simple qui fonctionne avec tous les navigateurs majeurs, y compris IE6!
Pour Firefox, il suffit d'ajouter le préfixe -moz à la propriété, ce qui donne -moz-border-radius. Pour les versions plus anciennes de Chrome et Safari, parce que les nouvelles supportent le CSS3, il faut ajouter le préfixe -webkit à la propriété, donc -webkit-border-radius.
Le cas de notre cher IE est plus compliqué... un peu. Il faut utiliser un fameux behavior pour y arriver. Heureusement, celui-ci est simple et peu volumineux (4.5 Ko environ). Il peut être téléchargé ici: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser.
Voici donc ce dont aura l'air notre code CSS pour obtenir des coins arrondis dans tous les navigateurs principaux:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(border-radius.htc);
C'est aussi simple que ça. Fini les images et les codes HTML incompréhensibles et incohérents!
