Internet Explorer supporte-t-il l'attribut CSS border-radius ?

Une propriété du langage CSS3 permet d'arrondir les angles des éléments HTML. Décryptage.

La propriété border-radius est une des nouveautés très attendues du langage CSS3. Elle permet d'arrondir les angles des éléments HTML.

Alors qu'auparavant il fallait des manipulations lourdes avec le langage CSS, ou même du langage JavaScript, il est maintenant possible de le faire en une propriété CSS. La propriété border-radius est supportée par Internet Explorer depuis la version 9 sortie en janvier 2011. Si vous souhaitez utiliser cette propriété, il faut l'indiquer comme ceci :

.maClasse
{
border-style: solid;
border-width: 2px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
{

La propriété -moz-border-radius est utilisée pour le navigateur Mozilla Firefox alors que la propriété -webkit-border-radius est utilisée par les navigateurs intégrant le moteur de rendu Webkit, comme Safari ou encore Chrome. Il est important quand on utilise cette propriété de vérifier les balises méta de la page HTML. La balise meta suivante peut être présente :

<meta http-equiv=X-UA-Compatible content=IE=9/>

Si l'attribut content a comme valeur IE-9, la propriété fonctionnera, mais si la valeur est celle d'une version plus ancienne, comme IE-7, alors la propriété ne sera pas lue par Internet Explorer, qui affichera la page comme s'il la lisait avec la version 7. Si vous voulez que la propriété soit bien utilisée par le navigateur, il faut soit changer l'attribut content, soit supprimer la balise (elle n'est pas obligatoire pour l'affichage de la page).

HTML/CSS