Jeudi 13 septembre 2012

Avec l'iPhone 5 et les mises à jour d'iPod, Apple se repose sur ses acquis
  • 16/09
  • 2010
  • 11h56

CSS 3 : border-radius

Difficulté : 3

  • Auteur : iNaphrayoo

La propriété border-radius permet d'arrondir les coins d'un élément de votre page. Faisant partie de CSS 3 encore à l'état de brouillon, elle est compatible avec les navigateurs basés sur les moteurs WebKit (Safari ou Chrome), Gecko (Mozilla Firefox) et Explorer 9.

Traditionnellement, la création de bords arrondis pour une interface web s'effectue avec des images. Ces dernières étant affichées dans des conteneurs imbriqués. Plusieurs techniques plus ou moins lourdes existent et ce afin d'afficher la même interface quelques soit le navigateur.

En pratique : La propriété border-radius peut accepter plusieurs valeurs, le problème actuel étant que sa syntaxe peut être différente en fonction du moteur de navigateur devant afficher la propriété.

Pour WebKit : -webkit-border-radius
Pour (Gecko) Mozilla : -moz-border-radius
La syntaxe devant être retenue : border-radius

Il est possible de cibler un coin, par exemple en haut à gauche. Attention : dans ce cas, la syntaxe s'écrit différemment pour WebKit et Mozilla :
- Pour un coin arrondi en haut à gauche pour Webkit : -webkit-border-top-left-radius
- Pour un coin arrondi en haut à gauche pour Gecko : -moz-border-radius-topleft

Pour éviter les différences de syntaxe, l'astuce consiste à enchainer les valeurs. Un conteneur ne pouvant avoir plus de 4 coins, les 4 valeurs se succèderont dans le sens des aiguilles d'une montre :
- Pour un coin arrondi en bas à droite pour WebKit : -webkit-border-radius: 0px 0px 10px 0px;
- Pour un coin arrondi en bas à droite pour Gecko : -moz-border-radius: 0px 0px 10px 0px;

border-radius sur Safari

Pour aller plus loin on peut également associer deux courbures d'angle. Dans ce cas, il faut travailler sur un seul coin et lui attribuer deux valeurs qui auront pour effet de mêler les deux courbures horizontale et verticale. Un exemple avec la syntaxe :
border-top-left-radius: 100px 50px;

16092010-114719.png
Les incompatibilités sont comme d'habitude avec IE6/7/8. Ces derniers afficheront des coins à angles droits. La version 9 d'Explorer affiche quelques propriétés CSS 3, chose que je n'ai pas encore testé.

L'utilisation de ce type de propriété oblige à faire attention aux marges et à tous les autres rajouts, ombres-portées, bordures... L'essentiel étant de vérifier le résultat sur plusieurs navigateurs pour éviter les mauvaises surprises.

  • Cet article est rattaché aux tags :
  • CSS
  • Tutoriaux
  • Web
Copyright © 2005-2014 PomGraphik. Tous droits réservés.