Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

CSS 3 : Réaliser des coins arrondis

Maintenant que la propriété border-radius est implémentée même par Internet Explorer, il n'y a plus vraiment de raisons de ne pas l'utiliser. Et pour les vieux navigateurs qui ne la reconnaissent pas, soit on s'en moque, soit on reste aux vieilles méthodes...

Arrondir les bords d'un cadre

Code (X)HTML

<div id="coin">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Mauris vulputate laoreet urna. Integer magna. 
  Donec facilisis lectus sed quam. 
  Curabitur sit amet lacus id lacus facilisis venenatis.
  </p>
</div>

Code CSS

Il n'y a normalement plus besoin d'utiliser des préfixes propriétaires tels -moz ou -webkit pour avoir la bonne restitution de l'arrondissement des coins. Néanmoins, pour assurer la compatibilité avec des versions de Firefox antérieures à la 4, ou pour le webkit de vieux smartphones, il vaut mieux encore les laisser.

La propriété border-radius peut accepter 4 valeurs pour l'arrondissement de chaque coins. La 1^ère valeur correspond au coin haut gauche, puis on tourne dans le sens des aiguilles d'une montre.
On peut n'en indiquer que 2, qui correspondront aux coins opposés (voir l'exemple ci-dessous), ou une seule pour un même arrondis sur les 4 coins.

.coin {
background-color:#E4EFFF;
border:1px solid #9FC6FF;
padding:5px;
/*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px 0;
}

Haut

Arrondir les coins d'une image

Pour arrondir les coins d'une image, même principe :

Code (X)HTML

<p>
 <img src="/pensees.jpg" width="300" height="400" alt="" class="arrondie" />
</p>

Codes CSS

/*sans bordure (1ère photo)*/
.arrondie {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}

Cependant, cette technique ne fonctionne pas avec Opera 11.5 par exemple. On peut alors ruser en déclarant une bordure qui donnera l'impression de masquer les coins. Cela ne sera néamoins valable que pour de petits rayons d'arrondissement car ce n'est qu'une pure illusion d'optique.

/*avec bordure (2ème photo)*/
.arrondie2 {
border:2px solid black;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}

Haut