CSS border-image-repeat

The border-image-repeat property in CSS specifies how the image specified by border-image-source is repeated to create the border image for an element. This property can have the following values:

stretch: The image is stretched to fill the border.
repeat: The image is repeated to fill the border.
round: The image is repeated or truncated to fill the border.
space: The image is repeated with space between the images to fill the border.

Let's see some examples of how border-image-repeat works:

Result:


  .border {
    border-image-source: url('border-image.png');
    border-image-slice: 30;
    border-image-width: 20;
    border-image-outset: 10;
    border-image-repeat: stretch;
  }

This is a div with a stretched border image.

Result:


  .border {
    border-image-source: url('border-image.png');
    border-image-slice: 30;
    border-image-width: 20;
    border-image-outset: 10;
    border-image-repeat: repeat;
  }

This is a div with a repeated border image.

Result:


  .border {
    border-image-source: url('border-image.png');
    border-image-slice: 30;
    border-image-width: 20;
    border-image-outset: 10;
    border-image-repeat: round;
  }

This is a div with a rounded border image.

Result:


  .border {
    border-image-source: url('border-image.png');
    border-image-slice: 30;
    border-image-width: 20;
    border-image-outset: 10;
    border-image-repeat: space;
  }

This is a div with a spaced border image.