Skip to content
Related Articles

Related Articles

Improve Article

How to repeat border image using CSS ?

  • Last Updated : 14 Jul, 2021
Geek Week

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:

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:

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:

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</h1>        
    </body>
</html>            

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :