Propriété border-image-repeat

La propriété border-image-repeat définit la manière de répéter la partie intérieure de la bordure sous forme d'image. Pour plus d'informations, consultez la propriété border-image.

Syntaxe

sélecteur {
	border-image-repeat: stretch | repeat | round;
}

Valeurs

Nombre de paramètres	Description
`stretch`	Étire le motif de la bordure aux dimensions de l'élément. Cette valeur est utilisée par défaut.
`repeat`	Répète le motif de la bordure.
`round`	Répète le motif et le met à l'échelle de sorte qu'un nombre entier d'images soit présent sur le côté de l'élément.

Valeur par défaut : stretch.

Nombre de paramètres

Peut prendre 1 ou 2 paramètres. Si deux paramètres sont spécifiés, le premier sera pour les bordures supérieure et inférieure, et le second paramètre - pour les bordures gauche et droite.

Exemple . Valeur stretch

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

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

Exemple . Valeur repeat

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

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

Exemple . Valeur round

Actuellement, à l'état normal, la valeur repeat est définie, et au survol - round. Notez qu'avant le survol, un nombre non entier de losanges tient dans la bordure, tandis qu'après le survol - un nombre entier. C'est ainsi que fonctionne round :

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

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

Exemple . Deux mots

Valeur repeat pour la largeur et stretch pour la hauteur :

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

#elem {
	border-image-repeat: repeat stretch;
	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 la bordure-image
la propriété border-image-source,
qui spécifie le chemin de l'image pour la bordure
la propriété border-image-slice,
qui est le découpage 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