17 nov

Créer une box avec des bords arrondis en css3

Écrit par freaknboy in Css, Web 2.0 |

CSS3, la vengeance du css !

Les calques rectangulaires ont définitivement fait leur temps.

Et même s’il est vrai que nos chers ennemis de chez microsoft ont encore le monopole de la part de marché des navigateurs,

Rien ne nous empêche de faire plaisir aux « maceux » et « firefoxiens » en stylisant un minimum ces fameux « div » que nous utilisons tous les jours, pour ma part, j’utilise donc quelques classes fournies par la librairie jQuery côté css :

Coin par coin, l’effet n’est pas négligeable :

.corner-tl { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
.corner-tr { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
.corner-bl { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }
.corner-br { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }

Côté par côté, très utile pour des onglets :

.corner-top { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
.corner-bottom { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.corner-right {  -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
.corner-left { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }

Le tout arrondi… c’est de toute beauté !

.corner-all { -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Petit exemple :


Le CSS3 est supporté par les dernières version de Firefox et Safari, et la prochaine version d’IE pourquoi pas ?


Réagissez sur cet article