{ Bords arrondis en css3 }

Introduction

Border-radius

Border-radius fais partie du top 5 des meilleures propriétés CSS3, elle permet d'arrondir les coins d'une balise div ou d'une table et donne une touche très sexy à vos div.

Attention cette propriété à toutefois ces limites : elle n'est pas compatible avec tous les navigateurs ! En effet Internet Explorer ne prend pas en charge les propriétés CSS3.

Le résultat ne sera visible que sur les navigateurs modernes.

Utilisation :

La valeur en pixels va définir le radians de l'angle qui sera appliqué aux coins. Si une seule valeur est entrée alors celle-ci sera appliquée au quatre coin de la balise.

border-radius: (valeur en pixels);

Pour Opera : border-radius: 18px;

Pour Firefox : -moz-border-radius: 18px;

Pour Chrome : -webkit-border-radius: 18px;

Code complet pour une compatibilité maximum :

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

Exemple 1

Angle de 18px appliqué aux quatres angles :

-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;

Exemple 2

Arrondir les coins supérieurs

-webkit-border-top-left-radius: 18px;
-webkit-border-top-right-radius: 18px;
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;

Exemple 3

Angle opposés seulement :

-webkit-border-top-left-radius: 18px;
-webkit-border-bottom-right-radius: 18px;
-moz-border-radius-topleft: 18px;
-moz-border-radius-bottomright: 18px;
border-top-left-radius: 18px;
border-bottom-right-radius: 18px;

Exemple 4

Angles inférieurs seulement :

-webkit-border-bottom-right-radius: 18px;
-webkit-border-bottom-left-radius: 18px;
-moz-border-radius-bottomright: 18px;
-moz-border-radius-bottomleft: 18px;
border-bottom-right-radius: 18px;
border-bottom-left-radius: 18px;

Exemple 5

Un seul angle arrondi :