The 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

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

Values

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

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

css#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

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

css#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:

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

css#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:

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

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

Результат:

See also