Créer des coins arrondis en CSS et sans images Application : un menu à onglets

Mettons en pratique cette technique pour réaliser le menu suivant :

Notre structure xHTML sera très classique, sous forme de liste :

 <ul id="menu"> 
   <li><a href="*">onglet 1</a></li> 
   <li><a href="*">onglet 2</a></li> 
   <li><a href="*">onglet 3</a></li> 
   <li><a href="*">onglet 4</a></li> 
   <li><a href="*">onglet 5</a></li> 
</ul> 

Et notre mise en forme CSS va se résumer (outre les fioritures habituelles) à arrondir les angles supérieurs des liens hypertextes :

 #menu { 
       margin: 0; 
       padding: 0; 
       list-style: none; 
     } 
#menu li { 
       display: inline; /* affichage horizontal */ 
     } 
#menu li a { 
       padding: 5px 20px; 
       margin: 0; 
       background: #98B924; 
       color: #fff; 
       border: 1px solid #89a; 
       text-decoration: none; 
       -moz-border-radius: 10px 10px 0 0; 
       -webkit-border-radius: 10px 10px 0 0; 
       border-radius: 10px 10px 0 0;        
       -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
       -webkit-border-top-right-radius: 10px; /* pour Chrome */ 
        
     } 
#menu li a:hover, #menu li a:focus { 
       background: #b8da40; 
       color: #000; 
     } 

A cet instant, le menu est parfaitement stylé sur l'ensemble des navigateurs modernes, mis à part Internet Explorer et Opera où les coins demeurent en angle droit.

Il ne suffit plus que d'appliquer Roundies.js, de l'appeler via un commentaire conditionnel pour IE et d'y ajouter l'instruction DD_roundies.addRule('#menu li a', '10px 10px 0 0'); pour que le script soit fonctionnel. C'est tout !