CSS - border-image-width Property

Quiz

CSS border-image-width property sets the width of the image that is set as the border of an element.

Syntax

border-image-width: length | number | percentage | auto | initial | inherit;

Property Values

Value	Description
length	It specifies the width of the border using length units (eg. 10px).
number	It represents the multiples of the border-width. The default value is 1.
percentage	It refers to the size of the border image area.
auto	It represents the internal width or height of the corresponding image slice.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Border Image Width Property

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

Border Image Width with Length Value

To set the width of the border image, we can specify the border width using length values (eg. 10px, 13px etc.). In the following example different width values have been used to highlight the difference.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
        .box{
                width: 200px;
                height: 200px;
                padding: 5px;
                border: 20px solid transparent;
                border-image-source: url(/css/images/border.png);
                border-image-slice: 33%;
                border-image-outset: 8px;
                margin-bottom: 45px;
        }
        .box1 {
                border-image-width: 15px;
        }
        .box2{
                border-image-width: 30px;
        }
   </style>
</head>
<body>
        <h2>
            CSS border-image-width property
        </h2>
        <div class=" box box1">
            <p>
                This box has a border-image-width of 15px
            </p>
        </div>
        <div class="box box2">
            <p>
                This box has a border-image-width of 30px
            </p>
        </div>
        <p>
            Image used:
        </p>
        <img src="/css/images/border.png" alt="border" height=150>
</body>
</html>

Border Image Width with Numeric Value

To set the width of the border image, we can specify the border width using numeric values (eg. 1,4,10 etc.), these represent the multiples of the border width. In the following example different width values have been used to highlight the difference.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
        .box{
                width: 200px;
                height: 200px;
                padding: 30px;
                border: 20px solid transparent;
                border-image-source: url(/css/images/border.png);
                border-image-slice: 33%;
                border-image-outset: 8px;
                margin-bottom: 45px;
        }
        .box1 {
                border-image-width: 2;
        }
        .box2{
                border-image-width: 3;
        }
   </style>
</head>
<body>
        <h2>
            CSS border-image-width property
        </h2>
        <div class=" box box1">
            <p>
                This box has a border-image-width of 2
            </p>
        </div>
        <div class="box box2">
            <p>
                This box has a border-image-width of 3
            </p>
        </div>
        <p>
            Image used:
        </p>
        <img src="/css/images/border.png" alt="border" height=150>
</body>
</html>

Border Image Width with Percentage Value

To set the width of the border image, we can specify the border width using percentage values (eg. 20%, 33% etc.). In the following example different width values have been used to highlight the difference.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
        .box{
                width: 200px;
                height: 200px;
                padding:15px;
                border: 20px solid transparent;
                border-image-source: url(/css/images/border.png);
                border-image-slice: 33%;
                border-image-outset: 8px;
                margin-bottom:45px;
        }
        .box1 {
                border-image-width: 7%;
        }
        .box2{
                border-image-width: 15%;
        }
   </style>
</head>
<body>
        <h2>
            CSS border-image-width property
        </h2>
        <div class=" box box1">
            <p>
                This box has a border-image-width of 7%
            </p>
        </div>
        <div class="box box2">
            <p>
                This box has a border-image-width of 15%
            </p>
        </div>
        <p>
            Image used:
        </p>
        <img src="/css/images/border.png" alt="border" height=150>
</body>
</html>

Border Image Width with Auto Value

To let the browser decide the width of the border based on the dimensions of the image and the element, we use the auto value. In the following example auto value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .border-image-auto {
            padding: 30px;
            width: 200px;
            height: 200px;
            border: 10px solid transparent;
            border-image: url('/css/images/border.png')
                          30 stretch;
            border-image-width: auto;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-image-width property
    </h2>
    <div class="border-image-auto">
        <p>
            border-image-width property with auto value
        </p>
    </div>
    <p>
        image used:
    </p>
    <img src="/css/images/border.png" alt="border" height=150>
</body>

</html>

Supported Browsers

Property
border-image-width	15.0	11.0	13.0	6.0	15.0

css_reference.htm

Print Page