CSS - border-image-source Property

This property specifies the path of the image that will be used as a border to an element.

Possible Values

  • none − It represents no image will be used as a border.

  • image − It represents the path of the image to be used as a border.

  • 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.borderImageSource = url('image');

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-slice: 33%;
        }
   </style>
</head>
<body>
        <div class="box"></div>
</body>
</html>
Advertisements