Le blog

Je vais faire dans ce post une petite présentation d'une nouveauté introduite par la version 3 de CSS, qui permet d'arrondir les angles des bordures de façon très simple.

Avant (ou presque)

Auparavant (ou actuellement si une compatibilité est exigée avec un navigateur ne gérant pas -encore ?- cette fonctionnalité) pour avoir des coins arrondis, il fallait (faut) passer par des images. Et quand on veut une zone totalement dynamique, ça peut vite devenir la galère (gérer une image par coin, en gardant tous les alignements lors du changement de taille).

Maintenant

Une des nouveautés du CSS3 est un attribut permettant de gérer nativement les arrondis de toutes les bordures.
Cet attribut, border-radius, n'est pas encore publié officiellement, mais certains navigateurs le prennent déjà en charge avec un attribut "propriétaire" :

• -moz-border-radius pour le moteur Gecko (utilisé entre autre par Firefox)
• -webkit-border-radius pour le moteur de rendu webkit (utilisé entre autre par Chrome)

Pour les exemples ci-dessous, j'ai utilisé firefox 3.5 et chrome 4.0. Cette nouveauté n'est donc pas gérée par Internet Explorer, et ce quelle que soit sa version ; la version 3.0 de firefox quant à elle ne la gère que partiellement.

Utilisation

Utilisée seule, la valeur de l'attribut (exprimé en px, pt, em ou %) permet de définir l'angle de l'arrondi appliqué aux quatre coins. Plus la valeur est élevée, plus l'arrondi sera donc grand :

Différentes variations de l'attribut existent pour personnaliser la zone. Déjà des divergences dans la notation apparaissent.
Ici le moteur webkit suit la spécification du W3C :

(À noter qu'il n'existe pas d'attribut pour arrondir uniquement les 2 angles du haut par exemple)

Un arrondi ovale peut ausi être appliqué à un coin en associant 2 valeurs au même attribut. La première valeur indique la courbure de l'angle horizontal, la deuxième de l'angle vertical :

Il est possible de gérer l'arrondi de plusieurs angles au sein de la même balise, tout en spécifiant l'incurvation horizontale et verticale. Le séparateur utilisé pour différencier les valeurs de chaque axe est le "/" :

Compatibilité

Inévitablement, des différences de syntaxe et de rendu selon les navigateurs apparaissent quand on essaye de regrouper toutes ces valeurs au sein du même attribut :

Analysons rapidement ce style. Les deux valeurs sont censées s'appliquer respectivement à l'angle supérieur gauche et supérieur droit (leur angle opposé reprendront ces valeurs). Le séparateur de valeur n'étant pas utilisé, l'arrondi horizontal devrait être le même que l'arrondi vertical.
Ici, pas de jaloux, c'est Firefox qui respecte les spécifications du W3C ; alors que Chrome applique un arrondi ovale aux 4 angles.

Si on utilise le slash, aucune ambiguïté n'est possible, et les 2 rendus sont identiques.

Conclusion

La norme CSS met ici à disposition un outil simple pour obtenir un rendu plus agréable. Il peut facilement être utilisé pour la création d'un style lors de l'ajout de fonctionnalité par exemple, ou lors de la modification d'une charte graphique. Et même si des problèmes de compatibilité entre navigateurs persistent encore et toujours, ils ne sont ici pas bloquants pour le traitement "de base", à savoir des coins... ronds.

Liens

http://www.w3.org/TR/css3-background/#the-border-radius