Open In App

How to repeat border image using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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(
            border-image-repeat: stretch;
            border-image-slice: 40;
            text-align: center;
        }
 
 
        h2 {
            border: 40px solid transparent;
            padding: 40px;
            border-image-source: url(
            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(
            border-image-repeat: repeat;
            border-image-slice: 40;
            text-align: center;
        }
 
 
        h3 {
            border: 40px solid transparent;
            padding: 40px;
            border-image-source: url(
            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(
            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>


Output:



Last Updated : 22 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads