Fini les coins carrés !

En attendant l’arrivée des CSS 3.0 (Cascading Style Sheets 3.0, en français : Feuille de style de niveau 3), voici un petit avant goût, via un exemple ci-dessous de ce qu’il sera possible d’obtenir : des coins arrondis (joie dans les foyers des webdesigners !) avec “du simple code” (fini les prises de tête, pour caler des petites images !).
Pour l’instant seul Firefox et certains navigateurs basées sur Mozilla supportent totalement les CSS de niveau 3.0 (via un code aménagé : Cf. ci-dessous)

Pour réaliser, ces coins arrondis il faut utiliser l’attribut radius (de la propriété border) qui est l’une des innovations majeures des CSS 3.0.

Voici un exemple d’utilisation

border-top-right-radius (comme cette attribut n’est pas encore validé par le W3C, seul l’équivalent pour mozilla marche soit : moz-border-radius-topright) donne :

Note : Bien entendu on peut affiner la courbure du cercle via diverses valeurs.

Plus d’infos sur l’attribut border : http://www.w3.org/TR/2002/WD-css3-border-20021107/

D’autres effets sont disponibles au niveau des bordures tels des effets de “vague”, d’ombrés …