CSS 3 : Bordure arrondie

CSS 3 permet beaucoup de nouvelles choses, cette version simplifie la construction d’une div avec des bordures arrondies.

Pour faire des bordures arrondies c’est très simple :

– créer une div et appliquer une classe

<div class= »bordurearrondie »>Test des bordures</div>

– appliquer le style (soit dans un fichier .css, soit entre les balises style)

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

Attention le tiret devant moz et obligatoire.

Observez le résultat, c’est plus simple que d’utiliser des images n’est ce pas ?

Vous pouvez aussi gérer l’angle pour chaque coin :

border-top-right-radius: 10px;

border-top-left-radius: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

Voir même donner un angle plus long ou plus court sur coté en spécifiant une deuxième valeur.

border-bottom-right-radius: 50px 25px;

La première valeur correspond au décalage x et la deuxième au y.

Toutes ses balises pour être compatible avec Mozilla peuvent être précédées -moz- .

Amusez vous bien.