Coins arrondis en CSS

Y’a des visiteurs qui postent des commentaires sur mon blog et qui m’envoient des mails à l’orthographe plutôt approximative. Exemple : “Comment que tu fais les coins arrondis qui encadrent nos commentaires ?” Ne comptant pas tout expliquer 50 fois à tout le monde, j’ai donc décidé de faire un billet convi-convi Bon c’est un peu technique mais ne nous affolons pas, ma grand-mère y arriverait sans peine

Alors y’a deux méthodes pour deux types de gens. Actuellement j’ai employé la première méthode dite “à-la-rache” parce que j’voulais faire ça rapidement sans me prendre la tête. Voyons de quoi il retourne.

Méthode “Moz Attitude”

Cette méthode c’est vraiment la simplicité même puisqu’il suffit d’ajouter une ligne dans sa feuille de style CSS. Le truc c’est que cette bidouille ne fonctionne que pour les visiteurs utilisant Firefox comme navigateur. Les autres verront un classique encadrement à angle droit. Donc on admet que la variable du commentaire se situe dans une div appelée “commentaire”. On ajoute donc à la div, la propriété suivante :

Mise en place :

HTML Feuille de style CSS

<div class="commentaire">Hello world !</div>

.commentaire
{
width:320px;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
-moz-border-radius:25px;
background-color:#000000;
border:2px;
color:#ffffff;
}

La propriété -moz-border-radius peut prendre comme valeur une dimension ou un pourcentage qui dépendra directement de la largeur de la div.

Résultat final :

Internet Explorer Mozilla Firefox

Notons que nous ne sommes pas obligés d’appliquer l’arrondissement aux quatre coins. On peut en effet utiliser les propriétés suivantes :

-moz-border-radius-bottomleft met un coin arrondi en bas à gauche.
-moz-border-radius-bottomright met un coin arrondi en bas à droite.
-moz-border-radius-topleft met un coin arrondi en haut à gauche.
-moz-border-radius-topright met un coin arrondi en haut à droite.

La propriété border-radius proposée pour CSS 3 n’a pas encore atteint le statut de Candidate Recommendation. Cette dernière n’autorise pas des valeurs différentes pour chaque coin. Notons que les images d’arrière-plan débordent au-delà des bordures arrondies et que les bordures arrondies ne supportent que la valeur solid pour border-style.

Méthode Universelle.

Cette seconde méthode est l’unique méthode qui fonctionne avec tous les navigateurs. Elle est un peu plus longue à mettre en place et personnellement je trouve le montage un peu crade mais bon… Si vous voulez que ça marche à chaque fois, vous n’avez guère le choix ! Il s’agit le plus simplement du monde de dessiner 4 coins (Photoshop, Paint, etc) puis d’imbriquer 4 div les unes dans les autres.

Nos 4 petits coins :

Mise en place :

HTML Feuille de style CSS

<div class="coin-superieur-gauche">
<div class="coin-superieur-droit">
<div class="coin-inferieur-gauche">
<div class="coin-inferieur-droit">
Hello world !</div></div></div></div>

.coin-superieur-gauche
{
width:320px;
background-color:#000000;
color:#ffffff;
background-image:url(csg.gif);
background-repeat : no-repeat;
background-position : top left;
}
.coin-superieur-droit
{
background-image:url(csd.gif);
background-repeat : no-repeat;
background-position : top right;
}
.coin-inferieur-gauche
{
background-image:url(cig.gif);
background-repeat : no-repeat;
background-position : bottom left;
}
.coin-inferieur-droit
{
background-image:url(cid.gif);
background-repeat : no-repeat;
background-position : bottom right;
padding : 3% 3% 3% 3%;
}

Notez bien l’importance du padding à 3% qui est primordial !

Résultat final :

Internet Explorer Mozilla Firefox

Conclusion

La méthode à retenir est bien sûr la méthode universelle puisqu’elle fonctionnera invariablement sur tous les navigateurs. Néanmoins j’espère fortement que les problèmes présents sur la méthode -moz- seront réglés prochainement et que cette dernière sera adoptée CSS3. Non parce que franchement, l’imbrication des 4 div et le fait de dessiner 4 petits coins ça me ramène un p’tit peu à la maternelle et… ça fait clairement pitié !