Voila un effet que j’aime particulièrement en CSS: les coins arrondis sur un div. Le problème, c’est que chaque navigateur à sa propre syntaxe pour ça!

Voici donc le code css pour avoir des coins arrondis sur un div, et pour tous les navigateurs (Google Chrome, Firefox, Internet Explorer…):

border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-o-border-radius: 7px;
-ms-border-radius: 7px;

Le 7px est pour l’exemple. plus le chiffre sera gros, plus les coins seront arrondis.

Ca ne marchera que si votre div a une couleur de fond et des bordures qui ne sont pas blanches (forcement!).

Exemple avec des bordures noires et un fond blanc:

background-color: #FFFFFF;
border: 1px solid #000000;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-o-border-radius: 7px;
-ms-border-radius: 7px;

L’exemple est également pour les 4 coins arrondis de la même façon. Vous pouvez par exemple n’arrondir que les coins du bas:

border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
-o-border-radius: 0 0 7px 7px;
-ms-border-radius: 0 0 7px 7px;

En CSS, l’ordre des valeur est toujours le suivant: haut – droite – bas – gauche (comme une montre). En l’occurrence, puisqu’il s’agit de coins, l’ordre est: supérieur gauche, supérieur droite, inférieur droite, inférieur gauche.