Cet article ne se veut pas exhaustif. En effet, les techniques à mettre en œuvre et leur déclinaison dépendront grandement des contraintes imposées par le contexte d'intégration et la nature du design sur lequel vous travaillez. Mon parti-pris dans la suite de cet article est le suivant : produire une boite avec des coins arrondis extensible en hauteur et en largeur avec les quatre coins transparents. Il s'agit d'une des contraintes les plus fortes quand on réalise des coins arrondis, mais il est toujours possible de faire plus contraignant

Faire des coins arrondis sans utiliser ni image ni Javascript

Je commence par cette méthode qui est la plus restrictive : n'utiliser aucune image ni aucun script pour réaliser des bords arrondis.

Pour cela, vous ne pouvez utiliser que CSS. Dans ce cas, la solution consiste à utiliser la propriété border-radius. Cette propriété fait partie du module "Background and Border" de la spécification CSS3 qui n'est à ce jour qu'à l'état de document de travail.

De fait à l'heure où j'écris ces lignes aucun navigateur ne l'implémente nativement. Seul Firefox et Safari ont un support expérimental de cette propriété via -moz-border-radius (FF2+) et -webkit-border-radius (S3+)

Ainsi, si cette solution à le mérite de la simplicité, le défaut de support de cette propriété rend son utilisation caduque dans un cadre industriel.

> Exemple d'utilisation de la propriété CSS border-radius

Faire des coins arrondis avec des images, mais toujours sans Javascript

Les solutions pour réaliser des coins arrondis avec des images sont légions, aussi, je me contenterai de vous en présenter deux.

La propriété CSS border-image

Il s'agit la aussi d'une nouveauté de CSS3, elle aussi issue du module "Background and Border". Son support est encore plus expérimental que border-radius ! A ma connaissance, seul Firefox 3.5 et Safari 3 supportent cette propriété via -moz-border-image et -webkit-border-image.

Cette propriété semble assez complexe à gérer la première fois que l'on met le nez dedans, mais elle offre des perspectives immenses dans la gestion des bordures au design complexe (par exemple pour des designs de type "papier déchiré").

Je ne vais pas partir dans des explications détaillées mais tout commence par une image type (les habitués des "CSS Sprite" vont apprécier) qui comprend les 4 coins, les 4 bordures et une partie central, soit 9 parties dans l'image. Par exemple, cette image de 21px x 21px (9 sections de 7px x 7px) :

Ensuite au niveau du code, cela va donner ce qui suit. Notez l'utilisation de la propriété border qui permet de fournir, outre la taille de la bordure,  une alternative aux navigateurs qui ne supportent pas la propriété border-image ou bien dans le cas ou l'image serait indisponible (à cause d'un lien brisé par exemple)

-moz-border-image: url(border.png) 7 repeat;
-webkit-border-image: url(border.png) 7 repeat;
border-image: url(border.png) 7 repeat;

border : 7px solid #1E4262;

> Exemple d'utilisation de la propriété CSS border-image

La propriété CSS background et un balisage HTML "adapté"

Il s'agit sans doute de la méthode la plus commune et elle se décline en de nombreuses variations selon les contraintes que l'on se fixe. Cela va de "mon cadre a une taille fixe" à "mon cadre est extensible en hauteur et en largeur avec des coins transparent". Le nombre de coins à prendre en considération a lui aussi une influence.

Pour illustrer le cas de figure le plus extrême, j'ai essayé de limiter au maximum le sur-balisage HTML mais pour les adeptes du POSH ça va piquer les yeux. C'est une solution, il en existe beaucoup d'autres qui dépendent du contexte d'utilisation. Afin d'alléger le tout, je ne saurais trop vous conseiller d'éviter de gérer la transparence dans la mesure du possible. Sans cette contrainte, vous pouvez au moins diviser par deux le nombre de balises HTML nécessaires.

> Exemple d'utilisation de la propriété CSS background avec un balisage HTML spécifique

Le principal défaut de cette méthode c'est de coupler trop étroitement la structure HTML avec la mise en forme CSS. Dans un contexte industriel, c'est un sujet important à anticiper car cela à des répercussions forte sur les coûts de maintenance.

Finalement, on peut aussi utiliser Javascript

Utiliser un script "qui fait tout"

Si vous utilisez un framework Javascript, il y a fort à parier qu'il existe une extension de ce framework qui permettra de faire des coins arrondis d'une manière ou d'une autre. L'intérêt de ces extensions, c'est que vous n'avez qu'à leur dire ce que vous voulez pour qu'elles le fassent à moindre frais. Par contre, si le plug-in que vous utiliser est mal fichu, vous vous exposez à des effets de bord parfois surprenant.

> Exemple d'utilisation d'un plug-in JQuery pour réaliser des coins arrondis

Enrichir l'arbre DOM de votre document

Si vous préférer rester maitre de votre document, vous pouvez choisir d'enrichir vous même l'arbre DOM de votre page HTML pour lui permettre d'afficher des coins arrondis sur les éléments de votre choix. Ainsi, vous rester avec un document HTML compréhensible et facilement maintenable et vous déléguez à Javascript la responsabilité d'enrichir l'arbre DOM et les style CSS pour obtenir le rendu de votre choix.

> Exemple d'utilisation de Javascript pour enrichir l'arbre DOM d'un document

C'est deux solutions peuvent être intéressantes dans certains contextes industriels en permettant de préserver la séparation des rôles entre HTML et CSS. Néanmoins, elles induisent une complexité parfois difficile à maitriser du point de vue de Javascript et cela peut avoir un coût non négligeable en terme de maintenance.

En conclusion

Comme on a pu le voir, il n'y a pas vraiment de solution miracle. Tant que la spécification CSS3 sur les bordures ne sera pas plus largement implémentée, la création de coins arrondis restera un point complexe à gérer. La maintenabilité des solutions misent en œuvres dépendra grandement de la (sur)compétence des intégrateurs web et de la qualité de la documentation qu'ils produiront. Je ne saurais trop encourager à l'économie de moyen sur ce point : pensez simple, pensez efficace et surtout, pensez à ceux qui devront passer derrière vous pour maintenir votre création.