CSS 3 : border-image démystifié

Il y a une nouvelle propriété css dans css3 qui permet de faire ce que l'on a toujours voulu faire en html / css : Faire une boite de notre cru avec dégradé ombre interne externe... Le problème c'est qu'il fallait faire une image et cette image n'était pas extensible. C'est à ce moment là qu'intervient border-image (mettez les préfixes qui vont bien -webkit- -moz- ...)

Syntaxe :

border-image:url(monimage.png) top right bottom left {stretch|repeat|round};

Exemple :

border-image: url("../images/fonds_bloc.png") 14 18 20 15 stretch;

border-width: 14px 18px 20px 15px;

Il est bien de combiner à cette propriété la largeur des borders c'est pour cela que j'ai ajouter border-width.

top right bottom et left : ils correspondent aux bordures de notre image (en pixel si l'image est matricielle ou en pourcent pour les images vectorielles) vous noterez que pour les images matricielles il ne faut pas ajouter l'unité px

les borders width : ils correspondent eux aux bordures de notre bloc (en pixel). Pour avoir la même échelle des bordures il est bien de mettre la même valeur pour borders width et top right bottom left.

Enfin un moyen mémo technique pour se souvenir de l'ordre des tailles de bordures : on commence par top puis dans le sens horaire (voir source).

Voici un exemple réel (il faut un navigateur qui supporte les border-image) : 

https://dl.crisalid.net/

La boite bleue est contruite avec ceci, voici l'image utilisée :

https://dl.crisalid.net/images/new/fonds_bloc.png

Pour plus de doc et des exemples suivez ma source :

https://www.lrbabe.com/sdoms/borderImage/index.html#nogo