Open In App
Related Articles

CSS border-image-repeat Property

Improve Article
Improve
Save Article
Save
Like Article
Like

The border-image-repeat property in CSS is used to scale and tiling the border images. It can be used to match the middle part of the border image to the size of the border. It can have either one or two values. One is for the horizontal and one for the vertical axis. Only one value is given then it applies to all sides, but two values are given it is given one value for the horizontal and another for the vertical sides. 

Syntax:

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

Property Values: 

  • stretch: It is the default value and is used to stretch the image to fill the area.
  • repeat: This property is used to repeat the background image.
  • round: It is used to repeat the image to fill the area. If the image doesn’t fill the area in the whole number of tiles the image is rescaled.
  • initial: It is used to set the border-image-repeat property to its default value.
  • inherit: It is used to set border-image-repeat property from its parent. 

Example: In this example, we are using border-image-repeat: stretch; property.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-image-repeat Property
    </title>
 
    <!-- CSS property -->
    <style>
        h2 {
            border: 20px solid transparent;
            padding: 20px;
            border-image-source:
            border-image-repeat: stretch;
            border-image-slice: 40;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2>border-image-repeat: stretch;</h2>
</body>
</html>


Output: 

stretch

Example: In this example, we are using border-image-repeat: repeat; property.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-image-repeat Property
    </title>
 
    <!-- CSS property -->
    <style>
        h2 {
            border: 20px solid transparent;
            padding: 20px;
            border-image-source:
            border-image-repeat: repeat;
            border-image-slice: 40;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>border-image-repeat: repeat;</h2>
</body>
</html>


Output: stretch

Example: In this example, we are using border-image-repeat: round; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-image-repeat Property
    </title>
 
    <!-- CSS property -->
    <style>
        h2 {
            border: 20px solid transparent;
            padding: 20px;
            border-image-source:
            border-image-repeat: round;
            border-image-slice: 40;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2>border-image-repeat: round;</h2>
</body>
</html>


Output: stretch

Example:  In this example, we are using border-image-repeat: initial; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-image-repeat Property
    </title>
 
    <!-- CSS property -->
    <style>
        h2 {
            border: 20px solid transparent;
            padding: 20px;
            border-image-source:
            border-image-repeat: initial;
            border-image-slice: 40;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2>border-image-repeat: initial;</h2>
</body>
</html>


Output: 

stretch

Supported Browsers: The browser supported by border-image-repeat property are listed below:

  • Google Chrome 15.0 and above
  • Edge 12.0 and above
  • Internet Explorer 11.0 and above
  • Firefox 15.0 and above
  • Opera 15.0 and above
  • Safari 6.0 and above

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials