Créer des coins arrondis en CSS

Compatibilités

border-radius : Safari 3 et + , Chrome 3 et + , FireFox 1 et + , Opéra 10.5 et + , Internet Explorer 9 beta et +

Coins arrondis.html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
<title>Cr&eacute;er des coins arrondis en CSS</title>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
 
 
<!-- Style CSS -->
<link rel='stylesheet' type='text/css' href='Coins arrondis CSS.css' />
 
 
 
</head>
<body>
 
 
<div id="arrondi_css_1">Arrondi en CSS n&deg;1</div>
 
<div id="arrondi_css_2">Arrondi en CSS n&deg;2</div>
 
 
<!-- Javascript -->
 
</body>
</html>

Télécharger le fichier

Coins arrondis CSS.css

#arrondi_css_1 , #arrondi_css_2{
 float:left;
 margin:0 1% 20px 1%;
 width:48%;
 background-color:#aaa;
 text-align:center;
}
 
#arrondi_css_1{
 /*
  Conseil : pour la lisibilit� et la maintenance du site, organiser les propri�t�s CSS
  utilisant une sandbox de fa�on d�croissante (Merci �ric)
  */
 -webkit-border-radius:10px;
 -khtml-border-radius:10px;
 -moz-border-radius:10px;
 -ms-border-radius:10px;
 -o-border-radius:10px;
 border-radius:10px;
 
 /* Compl�ment pour Internet Explorer, � t�l�charger sur http://css3pie.com/ */
 behavior:url(/PIE/PIE.htc);
}
 
#arrondi_css_2{
 /*
  Les valeurs sont dans l'ordre suivant :
  Haut-Gauche , Haut-Droit , Bas-Droit , Bas-Gauche
  */
 /* coins arrondis pour Chrome, Safari, Android */
 -webkit-border-radius:10px 10px 0 0;
 /* coins arrondis pour Konqueror */
 -khtml-border-radius:10px 10px 0 0;
 /* coins arrondis pour Firefox et Mozilla */
 -moz-border-radius:10px 10px 0 0;
 /* coins arrondis pour Internet Explorer */
 -ms-border-radius:10px 10px 0 0;
 /* coins arrondis pour Opera */
 -o-border-radius:10px 10px 0 0;
 /* coins arrondis par d�faut */
 border-radius:10px 10px 0 0;
 /* PIE */
 behavior:url(/PIE/PIE.htc);
}

Télécharger le fichier

PIE.zip

Démonstration

Créer des coins arrondis en CSS

Arrondi en CSS n°1

Arrondi en CSS n°2