Les bordures en CSS3

Le CSS3 améliore la propriété border afin de lui attribuer plus de fonctionnalités.

NOTE : selon le navigateur, il est nécessaire d'ajouter ou non le préfixe pour utiliser la propriété CSS3 : -webkit, -moz, -o. Si c'est le cas, il sera mis dans les exemples de code ci-dessous.

Compatibilité : Chrome, Safari, Firefox, Internet Explorer 9, Opera.

4 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. border-color

Cette propriété permet de changer les couleurs des bordures.

border-color: top right bottom left;
ou border-color: top|bottom right|left;

 
Sélectionnez

.border-color{
    border:5px solid #eee;
    background-color: #fff;
    border-color:#900 transparent #900 transparent;
    width:200px;
    height:30px;
}
<div class="border-color">
    border-color
</div>
			

Démo

II. border-image (non compatible : IE9 , compatibilité partielle : Opera, Firefox > 3.6)

La bordure peut être dorénavant mise en forme via des images. On peut ainsi spécifier une ou des images pour chaque bordure (top, left, bottom, right) ainsi qu'une ou des images pour les coins des bordures via les propriétés suivantes :

  • border-image;
  • border-top-image ;
  • border-right-image ;
  • border-bottom-image ;
  • border-left-image.
 
Sélectionnez

.borderImage{
    width:200px;
    height:30px;
    border: solid transparent;
    border-width:12px 22px;
    -webkit-border-image: url(../images/site/template/puceTitle.png) 12 22 round;
    -moz-border-image: url(../images/site/template/puceTitle.png) 12 22;
    border-image: url(../images/site/template/puceTitle.png) 22 round;
}
			

Démo

La propriété round permet de répéter l'image (tout comme la propriété repeat). Si l'on préfère étendre l'image sur la bordure, on peut utiliser la valeur stretch.

 
Sélectionnez

.borderImageStretch{
    width:200px;
    height:30px;
    border: solid transparent;
    border-width:12px 22px;
    -webkit-border-image: url(../images/site/template/puceTitle.png) 12 22 stretch;
    -moz-border-image: url(../images/site/template/puceTitle.png) 12 22;
    border-image: url(../images/site/template/puceTitle.png) 22 stretch;
}
			

Démo

III. border-radius

Permet de modifier l'arrondi des coins des bordures d'un élément.

On peut appliquer l'arrondi à un seul côté.

 
Sélectionnez

.border-radius{
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    border-radius:10px;
}
 
.border-radius-test2{
    -moz-border-radius:10px 0px 0px 0px;
    -webkit-border-radius:10px 0px 0px 0px;
    border-radius:10px 0px 0px 0px;
}
			

Démo

IV. box-shadow

Le box-shadow permet de rajouter un ombrage à un élément. Cet ombrage est lié au border-radius. En effet, si l'élément a un ou des coins arrondis, l'ombrage sera également arrondi dans le ou les coins.

 
Sélectionnez

.shadow{
    -moz-box-shadow: 5px 5px 5px #000000;
    -webkit-box-shadow: 5px 5px 5px #000000;
    -o-box-shadow: 5px 5px 5px #000000;
    box-shadow: 5px 5px 5px #000000;
}
			

Démo

V. Remerciements

Merci à jacques_jean pour sa relecture attentive.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2011 debray jerome. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.