CSS - border-image-repeat Property

Quiz

CSS border-image-repeat property specifies whether the border image should be repeated, rounded, spaced or stretched to fill the border area. The default value is stretched.

Syntax

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

Property Values

Value	Description
stretch	The border image is stretched to fill the entire border area. Default value.
repeat	The image is repeated or tiled to fill the entire border area.
round	The image is repeated or tiled to fill the entire border area. If the image is not filling up, the image is rescaled.
space	The image is repeated or tiled to fill the entire border area. If the image is not filling up, the extra space is redistributed around the tiles.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Image Repeat Property

The following examples explain the border-image-repeat property with different values.

Border Image Repeat Property with Stretch Value

To let the border image stretch so as to fill the border area, we use the stretch value. In the following example, stretch value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }

        .box1 {
            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: stretch;
        }
    </style>
</head>

<body>
    <h2>CSS border-image-repeat property</h2>
    <p class="box1">border-image-repeat 
    with value stretch: stretches the image 
    to fit the space.</p>
    <p>Image used:</p>
    <img src="/css/images/border.png" 
    alt="solid image" height=100>
</body>

</html>

Border Image Repeat Property with Repeat Value

To let the border image repeat so as to fill the border area, we use the repeat value. In the following example, repeat value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }

        .box1 {

            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: repeat;
        }
    </style>
</head>

<body>
    <h2>CSS border-image-repeat property</h2>
    <p class="box1">border-image-repeat 
    with value repeat: The image is repeated to
    fill the space.</p>
    <p>Image used:</p>
    <img src="/css/images/border.png" 
    alt="solid image" height=100>
</body>

</html>

Border Image Repeat Property with Round Value

To let the border image repeat so as to fill the border area such that if the entire space is not filled, the image is resized, we use the round value. In the following example, round value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }

        .box1 {

            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: round;
        }
    </style>
</head>

<body>
    <h2>CSS border-image-repeat property</h2>
    <p class="box1">border-image-repeat 
    with value round: The image is repeated to 
    fill the space, image is resized if space 
    is not filled.</p>
    <p>Image used:</p>
    <img src="/css/images/border.png" 
    alt="solid image" height=100>
</body>

</html>

Border Image Repeat Property with Space Value

To let the border image repeat so as to fill the border area such that if the entire space is not filled, redistribution of space is done around the tiles, we use the space value. In the following example, space value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }

        .box1 {

            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: space;
        }
    </style>
</head>

<body>
    <h2>CSS border-image-repeat property</h2>
    <p class="box1">border-image-repeat 
    with value space: The image is repeated to 
    fill the space, space is redistributed if 
    space is not filled.</p>
    <p>Image used:</p>
    <img src="/css/images/border.png" 
    alt="solid image" height=100>
</body>

</html>

Supported Browsers

Property
border-image-repeat	15.0	11.0	15.0	6.0	15.0

css_reference.htm

Print Page