Arrondir les bords d’un élément

Arrondir les bords d'un DIV en CSS, c'est maintenant un jeu d'enfant grâce à la propriété border-radius.

Petite exception sous IE>9 qui aura besoin d'un plugin externe : roundies

http://www.dillerdesign.com/experiment/DD_roundies/

Donc sous IE < 9 télécharger le script roundies.js et le déclarer dans son entête

<!--[if lte IE 8]>
 <script type="text/javascript" src="../../scripts/roundies.js"> </script>
 <script  type="text/javascript">
  DD_roundies.addRule('.monblocarrondi', '10px 10px 10px 10px ');
</script>
 <![endif]-->

Pour les autres navigateurs,  3 lignes dans la feuille de style suffisent pour arrondir les bords de mes éléments de classe .monblocarrondi  :

.monblocarrondi{
   border-radius: 3px; /* sert pour les dernières version des navigateurs à partir de IE 9*/
   -moz-border-radius: 3px; /* sert pour les anciennes versions de Mozilla */
   -webkit-border-radius: 3px;
}

A noter, la possibilité de personnaliser la courbure de chaque bord : border-radius: 10px 20px 30px 40px 10px :haut gauche – 20px: haut droit – 30px bas droit – 40px bas gauche. on part du haut gauche dans le sens des aiguilles d'une montre.