{ Comment faire les bords arrondis en css }

Introduction

Voici pour vous la fameuse technique CSS permettant d'arrondir les bords d'un bloc en XHTML, bien entendu il exsite de nombreuses autres techniques qui permettent d'obtenir le même résultat néanmoins la solution CSS reste celle qui vous permettra de le faire le plus rapidement sans avoir à crée des images de coin arrondis pour pouvoir y arriver. Toutefois il est nécessaire de rappeler que cette technique n'est pas valide CSS 2.0 mais le sera surement bientôt avec le CSS 3.0, en attendant seul quelques navigateurs tels que Firefox, Google Chrome et Safari. Pour leur part, Internet Explorer et Opera ne le reconnaissent pas.

Arrondi à 10px

Arrondi à 20px

Propriété css

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

Mais pourquoi faut-il deux propriétés alors que les valeurs sont strictement les même ? Tout simplement parce que chaque propriété est prévue pour fonctionner avec un navigateur en particulier ! La propriété ayant pour préfixe -moz (pour Mozilla de Firefox), -webkit est reconnu avec Safari.

Les unités acceptées pour ces propriétés sont les suivantes : px, %, pt et em.

border-radius: 2%;
-moz-border-radius: 12pt;
border-radius: 2em;
-moz-border-radius: 20px;
-webkit-border-radius: 10px:

Naturellement il faut que la balise à laquelle on souhaite ajouter ait les bords d'une couleur différentes du fond ou alors une bordure.

Si les propriétés border-radius (ainsi que -webkit-, -moz- et -o-) sont suivis d'une seule valeur, alors celle-ci sera appliquée aux quatres coins du bloc, si la propriété compte deux valeur, alors la première valeur travaillera les angles du haut et la deuxième valeur les deux angles du bas.

border-radius: 10px 10px 20px 20px;
-moz-border-radius: 10px 10px 20px 20px;
-webkit-border-radius: 10px:

Si cette même propriété est suivie de quatre valeurs, alors chacune des valeurs correspondra à un coin selon l'ordre suivant : coin supérieur gauche, coin supérieur droit, coin inférieur gauche et enfin coin inférieur droit.

Voilà c'est déjà terminé ! Facile non ?

Avantages de cette techique :

Très simple à mettre en place

Rayon de l'angle facilement modifiable

Inconvénients :

Pas reconnue comme étant valide CSS 2.0

Pas reconnue par tous les navigateurs