Trois méthodes pour faire des coins arrondis en CSS, compatible IE, Firefox, Chrome et Safari

Il existe plusieurs méthodes pour réaliser des coins arrondis en HTML. Les trois que je vous présente ici ont l’avantage de fonctionner sur n’importe quel moteur de rendu (Gecko, Webkit,…) et donc compatible avec les principaux navigateurs Internet Explorer, Mozilla Firefox, Safari, Chrome et Opera. C’est 3 techniques utilisent des approches complètement différentes, soit en passant par des images incrustées dans les coins, soit par du javascript ou soit par CSS3. C’est à chacun de vous de déterminer laquelle vous semble être la plus adapter à ce que vous voulez faire.


1 ) Une image pour chaque coin

Avant CSS3, la notion d’arrondi d’un div n’existait pas. C’est pour cette raison que l’on était obligé de passer par l’incrustation d’image. L’idée est de positionner 4 images artistiquement dessinées avec votre éditeur graphique préféré, et de les positionner en CSS :

Voici un petit exemple de ce que l’on peut faire. On va prendre la page HTML suivante :

<div id="roundiv">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="content"></div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>

Le div avec l’ID #roundiv qui est le conteneur. C’est lui que l’on désire arrondir. Pour se faire un va créer trois div à l’intérieur : le bleu le jaune et le vert.
Le bleu et le vert servent de conteneur à deux autres div .left et .right qui vont posséder l’image en arrière-plan avec l’arrondi et relativement la propriété float:left et foat:right. Le div .content est celui où sera affiché le contenu.
Le choix des couleurs est pour l’exemple, en utilisant une même couleur sur tous les div on aura l’illusion parfaite de n’avoir qu’une seule boite arrondie.

La feuille de style est la suivante :

#roundiv{
width:250px;
}
#roundiv .top{
height:20px;
background-color:lightblue;
}
#roundiv .bottom{
height:20px;
background-color:lightgreen;
}
#roundiv .left{
float:left;
background-color:orange;
height:20px;
width:20px;
}
#roundiv .right{
float:right;
background-color:orange;
height:20px;
width:20px;
}
#roundiv .content{
background-color:#FFEC9F;
height:100px;
}
#roundiv .top .right{
background: url(round-tr.png)
}
#roundiv .top .left{
background: url(round-tl.png)
}
#roundiv .bottom .right{
background: url(round-br.png)
}
#roundiv .bottom .left{
background: url(round-bl.png)
}

Cette technique est certainement la plus utilisée aujourd’hui et elle a le mérite de fonctionner même sur les navigateurs les plus anciens. Par contre pour quelque chose qui semble simple, elle nécessite quand même pas mal d’opération, dont celle de créer une image.

2 ) Les arrondis sont gérés en javascript

Il existe une autre technique en passant par javascript. Elle a l’avantage d’être très simple à mettre en place et d’être totalement cross-browser. Il existe un plugin jQuery qui fait ca très bien : JQuery Corner. Voici un exemple de code pour réaliser l’opération.

// default 10px round corner
$('#myDiv').corner();
 
// 30px round corner
$('#myDiv').corner('30px');
 
// 15px bevel corner
$('#myDiv').corner('15px bevel');
 
// dogeared top right corner
$('#myDiv').corner('dog tr');
 
// sharp corners on bottom
$('#myDiv').corner('sharp bottom');

Voir la démo de JQuery Corner
Télécharger JQuery Corner sur GitHub

Si vous ne voulez pas utiliser jQuery, il existe aussi une autre librairie javascript du nom de DD_roundies. Voir l’exemple suivant pour son utilisation:

// 1er parametre -> selecteur d'une div avec la classe .round
// 2nd parametre -> valeur de l'arrondi
DD_roundies.addRule('div.round', '20px');

Le défaut majeur est la dépendance à javascript, qui on le sait bien peut être désactivé par l’utilisateur via son navigateur web. Bien que de moins en moins de personnes sont concernées, je ne trouve pas très propre de devoir passer par un langage uniquement pour du design. Mais il faut avouer qu’au delà des arrondis, la librairies permet de faire bien d’autres effets, il sera relativement facile de trouver son bonheur.
On peut percevoir un autre défaut dépendant de la vitesse du moteur javascript du navigateur web (pour la démonstration utiliser IE). Effectivement le script étant exécuter une fois la page générée, on peut voir le moment ou les coins passent de rectangulaires à ronds.

3 ) On utilise les propriétés de CSS3

Bien qu’aujourd’hui le support du CSS3 n’est pas pris en compte par tous les navigateurs, c’est pour moi l’approche que l’on doit utiliser aujourd’hui. Selon les règles du W3C l’attribut CSS border-round doit correspondre à l’arrondi d’une div. Mais malheureusement les principaux moteurs de rendu utilisent encore leur propre synthaxe.

En W3C (seulement Opera pour l’instant):

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

Pour webkit (Safari,Chrome ou Chromium):

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

Pour Gekko(Firefox):

-moz-border-radius:20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;

Pour Konqueror:

-khtml-border-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
-khtml-border-bottom-left-radius: 20px;
-khtml-border-bottom-right-radius: 20px;

On peut donc aisément faire sa classe css de la manière suivante pour que l’effet s’affiche sur tous les navigateurs :

.round {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

IE8 pour ne pas changer est toujours à la traine et bien-sur n’implémente pas de fonction similaire. Par contre, il existe un hack intéressant en utilisant les extensions HTC. Non, non, rien à voir avec les téléphones mobiles. Ce sont des fichiers qui contiennent du javascript et qui s’utilisent à la manière d’un plugin dans IE. Pour les arrondis, le fichier HTC border-radius permettra de simuler la propriété border-radius en ajoutant behavior: url(border-radius.htc) dans votre CSS.
Pour résumé le code pour créer une div cross-browser est le suivant:

.round_container {
    position: relative; 
    z-index: 0;
}
.round {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    behavior: url(border-radius.htc)
}

Si vous voulez que celà marche pour IE8, assurez-vous juste que le div conteneur de .round possède les propriétés position: relative; z-index 0;

Articles similaires :

Mots-clefs : , , , ,

5 commentaires sur “Trois méthodes pour faire des coins arrondis en CSS, compatible IE, Firefox, Chrome et Safari”

  1. [...] pas. Cependant, comme je l’avais expliqué dans un billet précédent billet concernant la compatibilité des arrondies en CSS pour les différents navigateurs, pour certaines des fonctionnalités, il existe des alternatives, ou plutôt des hasks. On a [...]

  2. Bonjour,
    Je découvre votre site, et j’ai, je pense, trouvé la réponse à une question que je me pose depuis longtemps.
    Pour mes coins arrondis, j’utilise cette formule :

    border-top:1px solid #086500; -moz-border-radius:10px; border-bottom:1px ridge #086500; -moz-border-radius:10px; border-left:1px solid #086500; -moz-border-radius:10px; border-right:1px solid #086500;

    Les correcteurs n’apprécient pas ma formule, mais ça fonctionne.
    Dois-je corriger ma formule, ou est elle utilisable quand même?
    Au plaisir de votre réponse, cordialement

    • admin dit :

      Hello,
      L’attribut -moz-border-radius est réservé pour Mozilla Firefox. Cette notation n’est pas la notation officielle définie par le W3C. Il n’est pas étonnant que les éditeurs de code ne la reconnaissent pas. Mais elle est parfaitement valide, mais utilisable seulement sur Firefox.

      Les futurs navigateurs (dont Firefox 4 qui est prévu pour fin 2010) vont implémenter le CSS3, et on pourra dans quelque mois utiliser la notation border-radius. En attendant, il n’y a pas le choix d’utiliser -moz-border-radius

  3. Bonjour,
    Je viens de découvrir votre réponse, seulement aujourd’hui.
    Pour l’instant, mes arrondis fonctionnent encore, mais peut-on commencer à les faire évoluer?
    Au plaisir!

    • bugz dit :

      L’idéal est de faire en sorte que le CSS marche aujourd’hui pour tous les navigateurs et demain avec les nouvelles normes.
      Pour ce faire, il faut mettre les attributs spécifiques pour tous les navigateurs, soit :

      -moz-border-radius: 20px; /* marche aujourd’hui mais juste pour firefox */
      -webkit-border-radius: 20px; /* marche aujourd’hui mais juste pour chrome et safari */
      -khtml-border-radius: 20px; /* marche aujourd’hui mais juste pour konqueror */
      border-radius: 20px; /* VRAI ATTRIBUT CSS3 – marchera sur tous les nouveaux navigateurs (FF4, Chrome 9 et IE9) – marche déjà avec Opera

      Le préfixe est utilisé juste parce que la fonction « border-radius » est encore en beta. Les attributs -moz-border-radius, -webkit-border-radius, -khtml-border-radius marcheront probablement toujours sur leurs navigateurs spécifiques. Donc en mettant les additionnant les quatres attributs, on s’assure que la feuille de style marche aujourd’hui et sera valide avec les normes de demain.

Laisser une réponse à VIENS CZ DANINOUNE