HTML - DOM Style Object borderImageSlice Property

Quiz

HTML DOM Style Object borderImageSlice property specifies the inward offsets of image-border. It's default value is 100%.

Syntax

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

Set the borderImageSlice property:

object.style.borderImageSlice= "number | percentage | fill | initial | inherit";

Get the borderImageSlice property:

object.style.borderImageSlice;

Property Values

Value	Description
number	It represents pixels in image or the vector coordinates(if vecor image).
percentage	It is related to image size. It represents horizontal for image width and vertical offset for image height relative to the image size.
fill	It preserves the middle part of the border image.
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 slice property of an element.

Examples of HTML DOM Style Object 'borderImageSlice' Property

The following examples illustrates on how you can add, change or get the border image slice property.

Add and Set Border Image Slice Property

In this example we have implemented three values which are slice using length, percentage and fill.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageSlice Property
    </title>
    <style>
        #slice {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
        }
    </style>
</head>
<body>
    <p>Click to change</p>
    <button onclick="fun()">
        Change Using Number
    </button>
    <button onclick="funTwo()">
        Change Using Percentage
    </button>
    <button onclick="funThree()">Fill</button>
    <br><br><br>
    <p id="slice">
        This is a sample paragraph containing some 
        text. This paragraph is created only for example.
    </p>
    <script>
        function fun() {
            document.getElementById("slice")
                .style.borderImageSlice = "20";
        }
        function funTwo() {
            document.getElementById("slice")
                .style.borderImageSlice = "20% 40%";
        }
        function funThree() {
            document.getElementById("slice")
                .style.borderImageSlice = "fill";
        }
    </script>
</body>
</html>

Get Border Image Slice Property

The following example gets the applied border image slice property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageSlice Property
    </title>
    <style>
        #slice {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
        }
    </style>
</head>
<body>
    <p>Click to change</p>
    <button onclick="fun()">
        Change Using Number
    </button>
    <button onclick="funTwo()">
        Change Using Percentage
    </button>
    <button onclick="funThree()">Fill</button>
    <br><br><br>
    <p id="slice">
        This is a sample paragraph containing some 
        text. This paragraph is created only for example.
    </p>
    <p id="ex"></p>
    <script>
        function fun() {
            let x=document.getElementById("slice")
                .style.borderImageSlice = "20";
            document.getElementById("ex").innerHTML=x;
        }
        function funTwo() {
            let x=document.getElementById("slice")
                .style.borderImageSlice = "20% 40%";
            document.getElementById("ex").innerHTML=x;
        }
        function funThree() {
            let x=document.getElementById("slice")
                .style.borderImageSlice = "fill";
            document.getElementById("ex").innerHTML=x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderImageSlice	Yes 15	Yes 12	Yes 15	Yes 6	Yes 15

html_dom.htm

Print Page