HTML - DOM Style Object borderImageRepeat Property

Quiz

HTML DOM Style Object borderImageRepeat Property sets or returns whether the image-border should be rounded,repeated or stretched. It's default value is stretch.

Syntax

Given below are the syntax to get or set the borderImageRepeat property.

Set the borderImageRepeat property:

object.style.borderImageRepeat= "stretch | repeat | round | space | initial | inherit";

Get the borderImageRepeat property:

object.style.borderImageRepeat;

Property Values

Value	Description
stretch	It makes image stretched to fill the area
repeat	It repeats the image to fill the area.
round	It repeats the image to fill the area. If it does not fill the area with whole number of times, then image is rescaled.
space	It repeats the image to fill the area. If it does not fill the area with whole number of times, then extra space is distributed among tiles.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents border image repeat property of an element.

Examples of HTML DOM Style Object 'borderImageRepeat' Property

The folowing examples illustrates implementation of different property values of borderImageRepeat property.

Add Border Image Repeat Property

The following example adds border image repeat Property to round and then set the borderImageRepeat property to stretch and round.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageRepeat Property
    </title>
    <style>
        #repeat {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
        }
    </style>
</head>
<body>
    <p>Click to change repeat style</p>
    <button onclick="fun()">Stretch</button>
    <button onclick="funTwo()">Round</button>
    <br><br><br>
    <p id="repeat">
        This is a sample paragraph containing some text. This
        paragraph is created only for the sake of this example.
    </p>
    <script>
        function fun() {
            document.getElementById("repeat")
                .style.borderImageRepeat = "stretch";
        }
        function funTwo() {
            document.getElementById("repeat")
                .style.borderImageRepeat = "round";
        }
    </script>
</body>
</html>

Set Border Image Repeat to 'repeat' and 'space'

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageRepeat Property
    </title>
    <style>
        #repeat {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
        }
    </style>
</head>
<body>
    <p>Click to change repeat style</p>
    <button onclick="fun()">Repeat</button>
    <button onclick="funTwo()">Space</button>
    <br><br><br>
    <p id="repeat">
        This is a sample paragraph containing some text. This
        paragraph is created only for the sake of this example.
    </p>
    <script>
        function fun() {
            document.getElementById("repeat")
                .style.borderImageRepeat = "repeat";
        }
        function funTwo() {
            document.getElementById("repeat")
                .style.borderImageRepeat = "space";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderImageRepeat	Yes 15	Yes 12	Yes 15	Yes 6	Yes 15

html_dom.htm

Print Page