Arrondir les angles en CSS3

29 avril 2010,
par Romy Têtue

Mots-clefs associés à cet article :

Sur le Web les coins arrondis sont un vieux rêve, ou plutôt un cauchemar. Ça n’a, en effet, jamais été simple. Une propriété CSS3 permet de réaliser cela très facilement... dans les navigateurs modernes.

La propriété CSS3 border-radius

La propriété CSS3 border-radius permet d’arrondir les coins d’une boîte, avec ou sans bordure, très simplement. Par exemple :

border-radius: 10px;

Cette propriété peut s’appliquer individuellement, par exemple au coin haut droit seulement, et l’on peut définir l’arrondi de façon précise, en désignant les valeurs des deux rayons de l’ellipse sur lequel est formée la courbure :

border-top-right-radius: 55pt 25pt;

Son écriture raccourcie sera la suivante, où les valeurs s’appliquent aux coins dans l’ordre des aiguilles d’une montre, en commençant par le coin haut gauche :

border-radius: 5px 20px 0 20px;

équivaut à

border-top-left-radius: 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 20px;

Ce qui s’affichera ici comme ceci :

Exemple de bloc aux coins arrondis

 

Utilisation concrète : préfixons !

Tous les navigateurs n’ont pas encore implémenté cette propriété, car la norme CSS3 est toujours en développement.

Elle est cependant depuis longtemps utilisable sur les navigateurs modernes, où elle doit être préfixée pour fonctionner : par -moz- sur Gecko (Firefox) et par -webkit- sur Webkit (Safari, Chrome). On écrira donc :

-moz-border-radius: 5px 20px 0 20px;
-webkit-border-radius: 5px 20px 0 20px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
border-radius: 5px 20px 0 20px;

En terminant bien par la propriété conforme, de façon à surcharger les propriétés préfixées, qui ne sont pas pérennes.

Ce qui s’affichera ici comme ceci :

Exemple de bloc aux coins arrondis

 

L’écriture raccourcie de type -webkit-border-radius: 5px 20px 0 20px; ne fonctionnant pas sur Chrome, il faudra écrire la propriété pour chaque angle, comme aux 3 dernières lignes de l’exemple ci-dessus.

Voici, en image, ce que vous devriez voir :

Exemple de bloc aux coins arrondis

Tout se gâte avec IE...

Par contre, Internet Explorer ignore border-radius et affiche des angles droits, y compris sa dernière version (IE8). Pour afficher des coins arrondis sur ce navigateur, vous trouverez une multitude de bidouilles à base de découpes d’images (idéalement en sprite et avec <table> ou <div> imbriquées) ou de scripts divers.

Mais ces méthodes sont coûteuses. En plus d’être particulièrement pénibles à mettre en œuvre et à maintenir, elles plombent les performances : même optimisé, ce sera toujours plus lent à afficher côté utilisateur. On s’en passera donc avantageusement en optant pour une dégradation gracieuse sous Microsoft Internet Explorer.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom