Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Propriétés: border-radius

Maj: septembre 2011

La syntaxe...

La propriété border-radius permet de créer des coins arrondis sur un bloc. Cette propriété s’utilise de la façon suivante :

    border-radius:5px;
    border-radius:5px 10px;
    border-radius:10px 0px 0px 10px;

Il existe plusieurs façons d’utiliser cette règle, à la manière des marges internes et externes (padding et margin) :

  • Une valeur : les 4 coins sont arrondis avec cette valeur.
  • Deux valeurs : arrondis le coin haut-gauche et bas-droit indépendamment du coin haut-droit et bas-gauche.
  • Quatre valeurs : chaque coin a son propre arrondi.

Au jour d’aujourd’hui (février 2011), cette règle doit encore être préfixée pour être utilisée dans certains navigateurs. Ainsi vous devrez utiliser -webkit- et -moz-.

Cependant pour Firefox 4 ainsi que pour les dernières versions de Chrome et de Safari, ce préfixe devient inutile...Opéra et Internet Explorer 9 implémente la règle.