CSS | border-image-repeat Property

The border-image-repeat property in CSS is used to scaling 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 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 horizontal and another for vertical sides.

Syntax:

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

Property Values:



stretch: It is the default value and used to stretch the image to fill the area.

  • Syntax:
    border-image-repeat: stretch;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • Output:
    stretch

repeat: This property is used to repeat the background image.

  • Syntax:
    border-image-repeat: repeat;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • Output:
    stretch

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.

  • Syntax:
    border-image-repeat: round;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • Output:
    stretch

initial: It is used to set border-image-repeat property to its default value.

  • Syntax:
    border-image-repeat: initial;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • Output:
    stretch

inherit: It is used to set border-image-repeat property from its parent.

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

  • Google Chrome 15.0
  • Internet Explorer 11.0
  • Firefox 15.0
  • Opera 15.0
  • Safari 6.0


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.