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; }

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; }

===> 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; }

Il est à noter qu'il existe un plugin jQuery permettant de mettre en place le border-image sur tous type de navigateur:

jquery.borderImage.js

le fichier css

le code HTML

<div class="borderImage"> </div> <div class="borderImageStretch"> </div> <div class="borderImageBoth"> </div>
retourner en haut de la page