CSS3 nous offre de nouvelles propriétés pour les bordures. L’une d’elles est border-radius. Cette propriété est intéressante car elle nous permet de créer des coins arrondis tout simplement alors qu’auparavant, pour avoir un cadre avec des bords arrondis, il fallait créer quatre petites images, une pour chaque coin!

Attention, tous les navigateurs n’ont pas encore implémenté cette propriété. Firefox, Safari et Chrome l’interprètent bien avec leurs propriétés propres -moz-border-radius et -webkit-border-radius car la norme CSS3 est toujours en développement. Par contre, IE8 ne reconnait pas border-radius et affichera donc des coins droits.

Voici un exemple de code dans votre feuille de style :

.bloc {
background-color: #F2FFE1;
border: 1px solid #000;
padding: 10px;
width:200px;
height:88px;
margin: 0 auto 0 auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Et le code sur la page HTML:

Mon bloc avec des coins arrondis

Voici le résultat!

Mon bloc avec des coins arrondis

Vous pouvez également faire des arrondis différents sur chaque coin :

.bloc {
background-color: #F2FFE1;
border: 1px solid #000;
padding: 10px;
width:200px;
margin: 0 auto 0 auto;
-moz-border-radius-topleft:30px;
-webkit-border-top-left-radius:30px;
-moz-border-radius-topright:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
}

Ce qui donne le résultat suivant:

Mon bloc avec des coins arrondis
Be Sociable, Share!