How to repeat border image using CSS ?

Last Updated : 24 Jul, 2024

You can repeat border images using the border-image-repeat property in CSS. It is generally used for scaling and tiling the border-image. It is used to match the middle part of the border-image to the size of the border.

Syntax:

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

Note: The border-image-slice property is used to divide or slice an image specified by the border-image-source property.

Example 1: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
  
<head>

    <!-- CSS property -->
    <style>
        h1 {
            border: 40px solid transparent;
            padding: 40px;
            border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
            border-image-repeat: stretch;
            border-image-slice: 40;
            text-align: center;
        }


        h2 {
            border: 40px solid transparent;
            padding: 40px;
            border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
            border-image-repeat: round;
            border-image-slice: 50;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>border-image-repeat:stretch</h1>
    <h2>border-image-repeat:round</h2>
</body>
  
</html>

Output:

Example 2: Here is an example of border-image repeat: space property.

HTML

<!DOCTYPE html>
<html>

<head>

  <!-- CSS property -->
  <style>
    h1 {
      color: green;
      text-align: center;
    }

    h2 {
      border: 40px solid transparent;
      padding: 40px;
      border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
      border-image-repeat: repeat;
      border-image-slice: 40;
      text-align: center;
    }


    h3 {
      border: 40px solid transparent;
      padding: 40px;
      border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
      border-image-repeat: space;
      border-image-slice: 50;
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>Welcome to GeeksforGeeks</h1>
  <h2>border-image-repeat: repeat</h2>
  <h3>border-image-repeat: space</h3>
</body>

</html>

Output:

Note: The border-image-repeat property has a one-value syntax that describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.

Example 3: Here is another example of border-image repeat property.

HTML

<!DOCTYPE html>
<html>

<head>

  <!-- CSS property -->
  <style>
    h1 {
      color: green;
      text-align: center;
    }

    h2 {

      border: 40px solid transparent;
      padding: 40px;
      border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
      border-image-repeat: repeat round;
      border-image-slice: 40;
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>Welcome to GeeksforGeeks</h1>
  <h2>border-image-repeat: repeat round</h2>
</body>

</html>