CSS border-image-repeat Property

The CSS border-image-repeat property is used to specify if the border-image will be rounded, repeated or stretched.

The border-image-repeat property may be specified using one or two values. If one value is specified, it applies the same behavior on all four sides. If two values are specified, the first applies to the top and bottom, and the second to the left and right.

Initial Value stretch
Applies to All elements, except internal table elements when border-collapse is "collapse". It also applies to ::first-letter.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.borderImageRepeat = "round";

Syntax

border-image-repeat: stretch | repeat | round | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 20px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice:100;
      border-image-repeat: round;
      border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice property example</h2>
    <p class="border">border-image-repeat: round;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Let's see an example with "round" and "repeat" values to see the difference between them.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border1 {
      border: 10px solid transparent;
      padding: 20px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice:100;
      border-image-repeat: round;
      border-image-width: 10px;
      }
      .border2 {
      border: 10px solid transparent;
      padding: 20px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice:100;
      border-image-repeat: repeat;
      border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: round;</p>
    <p class="border2">border-image-repeat: repeat;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Another example where "space" and "stretched" values are illustrated.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
      border: 10px solid transparent;
      padding: 20px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice:100;
      border-image-repeat: space;
      border-image-width: 10px;
      }
      .border2 {
      border: 10px solid transparent;
      padding: 20px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice:100;
      border-image-repeat: stretch;
      border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Values

Value Description
stretch Every gap between each border will be filled with stretched images. This is the default value.
repeat Every gap between each border will be filled with repeated images. For reaching proper fit, repeats may be clipped.
round Every gap between each border will be filled with repeated with images. For reaching proper fit repeats may be stretched.
space Every gap between each border will be filled with repeated images. For reaching proper fit extra space will be distributed between repeats.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

15.0+ 12.0+ 15.0+ 6.0+ 15.0+




Related articles