Le blog change un peu d'orientation avec des articles orientés WebMaster. Le premier concerne donc le CSS3 et l'une de ses caractéristiques, border-radius. Comme vous pouvez vous en douter, en utilisant ce paramètre vous pouvez arrondir les coins des éléments HTML sans utiliser des images. Attention tout de même certains navigateurs arriérés ne comprennent pas cette syntaxe.

Border-radius


 Voila un petit exemple tout simple, le calque (div) ci-dessous à ces coins arrondis de 15px.
Voici certains navigateurs compatibles: Firefox, Safari/Chrome, Opera et IE9.
Et ici le code qui va avec :
#example1 { border-radius: 15px; }
Pour Firefox < 5 vous devrez utiliser le préfixe -moz- :
#example1 { -moz-border-radius: 15px; }

Border-*-radius


La propriété border-radius permet de gérer les quatres coins en même temps, vous pouvez gérer les coins indépendamment grâce à d’autres expressions (border-bottom-left-radius, border-top-left-radius, etc.)

Les propriétés border-*-radius acceptent deux valeurs qui peuvent être définies en px ou en %
Si une seule valeur est renseigné, elle sera utilisé pour définir le rayon horizontal et vertical du coin.
Si les deux valeurs sont présente, alors la première correspondra au rayon horizontal alors que le second le vertical.
Si la valeur est égale à 0, alors le coin ne sera pas arrondi.

Voici un exemple de syntaxe :
border-top-right-radius: 20px;
border-top-left-radius: 10px 30px;
border-bottom-right-radius: 10% 5%;
border-bottom-left-radius: 0px;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Quelques illustrations pour mieux comprendre :
div
border-top-left-radius: 15px;
div
border-top-left-radius: 15px 15px;
div
border-top-left-radius: 40px 15px;
div
border-top-left-radius: 15px 40px;

Border-radius : *px / *px


La propriété border-radius permet aussi de gérer séparément les quatres coins d'un élément. Pour cela, il faut définir deux jeux de valeurs séparés par un <i>/</i>. Le premier jeu qui peu être composer de une à quatre valeurs défini le rayon horizontal de tous les quatres coins. Le second qui est optionnel permet de donner des valeurs verticales aux coins.

Voici un exemple de syntaxe :
#Example_A { border-radius: 12px 16px 12px 16px / 16px 12px 16px 12px; }
#Example_B {border-radius: 12px; }
#Example_C {border-radius: 12px 16px / 16px; }

Et le résultat :
A
B
C

Différents exemples :

#Example_A {
height: 45px;
width:140px;
border-bottom-right-radius: 30px;
}

#Example_B {
height: 45px;
width:140px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 45px;
width:140px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 45px;
width:140px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
border-radius: 35px;
}

A
B
C
D
E
F