Border-image en CSS3
La bordure peut etre 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
En voici un exemple
Démo
le code CSS
.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;
}
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;
}
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
Démo
le code CSS
.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;
}
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;
}
===> ATTENTION : les sous propriétés de border-image ne sont pas encore prises en compte par les navigateurs
Via les sous propriétés de border-image, on peut fixer une image à une bordure:
- border-top-image
- border-right-image
- border-bottom-image
- border-left-image
Démo
le code CSS
.borderImageBoth{
width:200px;
height:30px;
background-color:#900;
border: solid transparent;
border-width:12px 22px;
border-top-width:20px;
-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;
-webkit-border-top-image: url(../images/stripe.png) 12 22 round;
-moz-border-top-image: url(../images/stripe.png) 20 round;
border-top-image: url(../images/stripe.png) 20 round;
}
width:200px;
height:30px;
background-color:#900;
border: solid transparent;
border-width:12px 22px;
border-top-width:20px;
-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;
-webkit-border-top-image: url(../images/stripe.png) 12 22 round;
-moz-border-top-image: url(../images/stripe.png) 20 round;
border-top-image: url(../images/stripe.png) 20 round;
}
Il est à noter qu'il existe un plugin jQuery permettant de mettre en place le border-image sur tous type de navigateur:
le code HTML