Propriété border-image-source

La propriété border-image-source définit l'image de la bordure. Pour plus d'informations, voir la propriété border-image.

Syntaxe

sélecteur {
	border-image-source: url(chemin vers l'image);
}

Exemple

La propriété border-image-source doit être définie avec border-image-slice :

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple

Si la propriété border-image-slice n'est pas définie, toute l'image ira dans les coins (car border-image-slice a par défaut la valeur 100%) :

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple

Au lieu d'une image, on peut définir un dégradé linéaire :

<div id="elem"></div>

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-image-slice: 30;
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

Exemple

Si la propriété border-image-slice n'est pas définie, le dégradé ira dans les coins (car border-image-slice a par défaut la valeur 100%) :

<div id="elem"></div>

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

Exemple

Si on définit la propriété border-radius, malheureusement, la bordure ne sera pas arrondie (y compris avec un dégradé), bien que l'effet soit également assez intéressant :

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voir aussi

la propriété border-image,
qui est un raccourci pour l'image de bordure
la propriété border-image-slice,
qui est le découpage de l'image pour la bordure
la propriété border-image-repeat,
qui est la répétition de l'image pour la bordure
la propriété border-image-width,
qui définit la taille de l'image pour la bordure
la propriété border-image-outset,
qui définit le décalage de l'image pour la bordure