Créer des coins arrondis en CSS et sans images Simple et approprié : border-radius

border-radius est une propriété CSS3, encore à l'état de brouillon mais tout à fait utilisable en production dans les navigateurs modernes. Elle permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité.

Compatibilité et utilisation concrète

A l'heure où ce tutoriel est écrit, seuls les navigateurs basés sur Gecko (Mozilla Firefox) et sur Webkit (Safari, Chrome) reconnaissent la propriété border-radius. En pratique, la propriété doit être préfixée par -moz- sur Gecko ou -webkit- sur Webkit pour fonctionner sur ces navigateurs.

border-radius devient donc -moz-border-radius et -webkit-border-radius.
Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces préfixes pour fonctionner.

Exemple :

 #cadre { 
 border-radius: 10px; 
}

Il est possible de définir l'arrondi de chacun des angles, à l'aide d'une écriture raccourcie qui se lit comme à l'accoutumée dans le sens des aiguilles d'une montre en débutant par le haut (top, right, bottom, left).

Ainsi la règle suivante va créer un bloc arrondi de 5px en haut à gauche, 10px en haut à droite, 0px en bas à droite et 5px en bas à gauche :

 #cadre { 
 border-radius: 5px 10px 0 5px; 
}#cadre { 
 border-radius: 5px 10px 0 5px; 
}

Note : l'écriture raccourcie de type -webkit-border-radius: 10px 10px 0 0; ne fonctionnant pas sur Chrome, il faudra écrire chaque propriété complètement, soit -webkit-border-top-left-radius: 10px; et -webkit-border-top-right-radius: 10px; pour obtenir un arrondi sur les angles du haut.

Il est tout à fait possible de réaliser des courbes non circulaires en précisant le degré d'arrondi horizontal et vertical.