Ce tutoriel vous montera comment de manière simple de créer des coins arrondies avec tous les navigateurs à l’exseption d’Explorer. Et oui, c’est toujours plus compliqué avec IE

Pour réaliser un arrondie, vous devez inclure dans votre feuille de style CSS la propriété border-radius

Mise en place : border-radius

En donnant une valeur de 10px a votre propriété vous créer par défaut un cadre arrondie totalement égaux dans les 4 coins

Exemple :

#cadre {
  border-radius: 10px;
}</code>

Exemple visuel:

coins arrondis en CSS égaux

Il est possible de définir l’arrondi de chacun des coins, à l’aide de la façon suivante
border-radius:(coin haut-gauche 0px, coin haut-droit 10px, coin bas-droit 20px, coin bas-gauche 30px).

Exemple :

#cadre {
  border-radius: 0px 10px 20px 30px;
}

Exemple visuel:

coins arrondis différent

Compatibilité avec les vieux navigateurs

Présentement Tous les navigateurs à se jour sauf IE, peuvent arondie les coins d’un cadre avec la seul propriété border-radius. Comme tous les personnes dans le monde ne sont pas forcément a jour sur leur navigateur. Il vous faudra inclure -moz-border-radius et -webkit-border-radius dans votre feuille de style

En général je recommence fortement d’inclure les 3 types de propriété dans votre feuille de style, ça vous évitera des surprises.

Exemple :

#cadre {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}