Les bordures en CSS3

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

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

.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

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.

.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.

.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

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

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

.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

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.

.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

Merci à jacques_jean pour sa relecture attentive.