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.
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;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
Angle de 18px appliqué aux quatres angles :
-webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px;
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;
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;
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;
Un seul angle arrondi :