border-image - Propriété CSS
Résumé des caractéristiques de la propriété border-image
Description de la propriété border-image
.
border-image
est une propriété résumée, qui permet de définir en une seule règle, les valeurs de toutes les propriétés relatives aux bordures-image :
border-image-source
: Définit l'image utilisée pour construire la bordure.border-image-slice
: Définit comment l'image de bordure est découpée.border-image-width
: Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.border-image-outset
: Définit le débordement de l'image de bordure.border-image-repeat
: Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Ces propriétés permettent de créer une bordure à partir d'une image. Autrement dit de remplacer le style de trait prédéfini (double, pointillé, etc) par une image. Les possibilités de création sont infinies.
L'image qui servira à construire la bordure sera divisée en 9 parties :
une pour chacun des quatre coins, pour chacun des quatre bords et une pour le centre.
La propriété border-image-slice
définit comment l'image doit être découpée.
Les neuf parties ne sont pas forcément de dimensions identiques.
border-image-slice
permet également de décider si la partie numéro 5 sera appliquée au fond de
l'élément. Dans le cas contraire, le fond de l'élément reste transparent.
Après ce découpage, les parties d'image sont redimensionnées par pour
correspondre à l'épaisseur de la bordure.
Elles peuvent ensuite être répétées ou étirées jusqu'à couvrir toute la longueur de la bordure :
voir border-image-repeat
.
Chacune des valeurs attribuées à border-image
peut être différenciée pour les quatre côtés, sauf en ce
qui concerne la source. Dans ce cas les règles habituelles du CSS s'appliquent :
Une seule valeur indiquée : elle s'applique aux quatre côtés de l'élément.
Deux valeurs indiquées : la première s'applique aux côtés haut et bas, la deuxième aux côtés gauche et droit.
Trois valeurs indiquées : elles s'appliquent conformément au schéma ci-dessus : la deuxième valeur s'applique aux côtés gauche et droit.
Quatre valeurs indiquées : elles s'appliquent chacune à un des côtés de l'élément, en commençant par le bord du haut et en tournant dans le sens des aiguilles d'une montre.
Les bordures-images ne suivent pas les arrondis d'angle. La propriété border-radius
est donc inopérante avec une bordure-image.
Si, sur un même élément, une bordure image ET une bordure classique sont définies, les règles de priorité du CSS définissent laquelle de ces deux bordures sera affichée. Les navigateurs ne sont pas censé superposer les deux bordures. Voir le tutoriel sur les règles de priorité.
Exemples de syntaxes.
- border-image: source slice / width / outset repeat;
Ceci est la syntaxe générale de border-image :
Les informations doivent être énumérées dans cet ordre mais les trois premières seulement sont obligatoires.
On voit que l'épaisseur de la bordure (width
) et le décalage vers l'extérieur (outset
) sont introduits par un caractère slash (/
). - border-image: url('...') 200 / 15px;
Cette syntaxe définit l'image à utiliser, la valeur à utiliser pour son découpage (
200
pixels), et l'épaisseur de la bordure (15px
). - border-image: url('...') 200 / 15px / 10px;
Cette syntaxe définit l'image à utiliser, la valeur à utiliser pour son découpage, l'épaisseur de la bordure (après le premier
/
), et enfin le décalage extérieur (après le deuxième/
). - border-image: url('...') 20 15 30 12 / 15px 20px;
Bien entendu toutes ces valeurs peuvent être différentes pour chacun des côtés.
La syntaxe ci-dessus définit quatre valeurs pour découper l'image, et deux épaisseurs de bordure. - border-image:
initial
; border-image:inherit
; border-image:revert
; border-image:revert-layer
; border-image:unset
;La valeur initiale est :
Voir les propriétés individuelles.
.
Exemples.
Voici les images utilisées pour les exemples ci-dessous :
border-image-1.png
45 x 45 pixels
border-image-2.png
600 x 600 pixels
border-image-3.png
172 x 164 pixels
fill
a été ajoutée à border-image-slice
.
l'arrière-plan de l'élément est donc rempli avec la partie centrale de l'image de bordure.border-image-repeat
).
Prise en charge par les navigateurs.
La possibilité d'utiliser une image pour construire une bordure est maintenant bien prise en charge par les navigateurs. Les propriétés qui définissent cette bordure sont également bien reconnues.
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que border-image
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border-image
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.