Propriété border-image-width

La propriété border-image-width contrôle la largeur de la partie visible de la bordure, la met à l'échelle. Si cette valeur est supérieure à la largeur de border-width, l'image de la bordure empiétera sous le contenu.

Pour plus d'informations, consultez la propriété border-image.

Syntaxe

sélecteur {
	border-image-width: unités CSS | pourcentages | nombre | auto;
}

Valeurs

Valeur	Description
Unités CSS	Valeur dans les unités CSS spécifiées.
Pourcentages	Valeurs en pourcentage par rapport à la taille du bloc auquel la bordure est appliquée.
Nombre	Valeur numérique par laquelle est multipliée `border-width`.
`auto`	Mot-clé. S'il est spécifié, la valeur est égale au `border-image-slice` correspondant. S'il n'y a pas de taille appropriée, la valeur de `border-width` est utilisée, et l'image remplit tout le coin de la bordure, empiétant sous le contenu. Voir les exemples pour une meilleure compréhension.

Valeur par défaut : 1.

Exemple . Nombre

Définissons la valeur de border-image-width sur 2 lors du survol de l'élément avec la souris. Ainsi, la bordure deviendra de taille 26px*2 - 2 fois plus grande que sa largeur définie dans border-width. La bordure empiétera alors sous le texte (comme un fond) :

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

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

Exemple . Changeons border-image-repeat en round

Dans l'exemple précédent, lors du survol, la bordure ne contiendra pas un nombre entier de losanges. Corrigeons ceci en définissant border-image-repeat à la valeur round :

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

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

Exemple . Pourcentages

Définissons la valeur de border-image-width sur 50% lors du survol de l'élément avec la souris. Ainsi, la bordure deviendra de taille 50% par rapport à la taille du bloc (c'est-à-dire que les deux bordures, droite et gauche, couvriront l'ensemble du bloc) :

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

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

Exemple . Pourcentages

Définissons la valeur de border-image-width sur 30% lors du survol de l'élément avec la souris. Ainsi, la bordure deviendra de taille 30% par rapport à la taille du bloc :

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

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

Exemple . Pixels

Définissons la valeur de border-image-width sur 50px lors du survol de l'élément avec la souris :

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

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

Exemple . Valeur auto

Définissons la valeur de border-image-width sur auto lors du survol de l'élément avec la souris.

Avant le survol, border-image-width a la valeur 1 (par défaut). Dans l'exemple, border-width est intentionnellement défini sur 52px, et border-image-slice - sur la valeur 26 (l'effet avec auto ne sera observé que si border-width n'est pas égal à border-image-slice). En raison du fait que border-image-width a la valeur 1, l'image de la bordure occupera toute la largeur de border-width, c'est-à-dire qu'elle s'étirera sur 52px. Lors du survol, la valeur de border-image-width deviendra auto et la largeur de l'image deviendra égale à la valeur de border-image-slice, c'est-à-dire 26px :

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

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	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-source,
qui définit le chemin de l'image pour la bordure
la propriété border-image-slice,
qui découpe l'image pour la bordure
la propriété border-image-repeat,
qui répète l'image pour la bordure
la propriété border-image-outset,
qui définit le décalage de l'image pour la bordure