CSS - border-image-width Property

Sets the width of the image that is set as the border of an element.

Possible Values

  • length − Any length unit value specifying the width (in pixel).

  • number − It represents multiples of the border-width The default value is 1.

  • percentage (%) − It refers to the size of the border image area.

  • auto − It is specified as the internal width or height of the corresponding image slice.

  • initial − It sets the default value to the property.

  • inherit − It inherits the property from the parent element.

Applies to

All the HTML elements.

DOM Syntax

object.style.borderImageWidth = "10px";

Example

Here is the example which shows effect of this property −

<html>
<head>
   <style>
   .box {
            width: 200px;
            height: 200px;
            border: 20px solid;
            border-image-source: url(images/border.png);
            border-image-width: 15px;
            border-image-slice: 33%;
            border-image-outset: 8px;
        }
   </style>
</head>
<body>
        <div class="box"></div>
</body>
</html>
Advertisements