CSS border-image-repeat Property

Description

The border-image-repeat CSS property determines how a border image is repeated or stretched to fill the area defined by an element's border. It is typically used in conjunction with the border-image-source property. There are several values that can be applied to border-image-repeat, including "stretch," which stretches the border image to cover the entire border, "repeat," which repeats the image to fill the border area, and "round," which repeats the image but adjusts the number of repetitions to ensure no partial images are displayed. This property allows web developers to control the visual treatment of border images, ensuring they adapt appropriately to different element sizes and shapes.

Initial value: stretch
Applies to: All elements
Inherited: No
Computed value: Two keywords, one for each axis
Animatable: No
JavaScript syntax: object.style.borderImageRepeat

Interactive Demo

border-image-repeat: stretch;

border-image-repeat: repeat;

border-image-repeat: round;

border-image-repeat: space;

border-image-repeat: round stretch;

Example of the border-image-outset property.

Syntax

border-image-repeat: [ stretch | repeat | round | space ]{1,2}

Values

stretchThe image is stretched to fill the area.
repeatThe image is tiled (repeated) to fill the area.
roundThe image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.
spaceThe image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

Example

HTML

<div>Example of the border-image-repeat property</div>

CSS

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Result

Editor