border-image-repeat property

The border-image-repeat property specifies how the inner part of a border is repeated as an image. For more details, see the border-image property.

Syntax

selector {
	border-image-repeat: stretch | repeat | round;
}

Values

Number of parameters	Description
`stretch`	Stretches a border image to an element size. This is the default value.
`repeat`	Repeats a border image.
`round`	Repeats an image and scales it so that there is an integer number of images on the element side.

Default value: stretch.

Number of parameters

Can take 1 or 2 parameters. If two parameters are given, then the first one will be for the top and bottom borders, and the second parameter will be for the left and right.

Example . The stretch value

<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;
}

Example . The repeat value

<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;
}

Example . The round value

Now in the normal state the value is set to repeat, and on hover - round. Please note that before hovering, not a whole number of diamonds are placed in the border, but after hovering - a whole number. This is how round works:

<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;
}

Example . Two values

The repeat value for width and stretch for height:

<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;
}

border-image-repeat property

Syntax

Values

Number of parameters

Example . The stretch value

Example . The repeat value

Example . The round value

Example . Two values

See also