CSS - border-image Property

This property allows you to add an image as a border around an element. The default value is none 100% 1 0 stretch.

The border-image is a shorthand property for the following:

Possible Values

  • border-image-source − It specifies the path of the image to be set as border.

  • border-image-slice − It specifies how to slice the image that is to be set as border.

  • border-image-width − It specifies the width of the image that is to be set as border.

  • border-image-outset − It specifies how much the border image area extends beyond the border box.

  • border-image-repeat − It It specifies whether to repeat the image to fill the 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.borderImage="url(image) 30 round"

Example

Here is the example which shows effect of this property −

<html>
<head>
   <style>
   .box {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url(images/border.png) 30 stretch;
        }
   </style>
</head>
<body>
        <div class="box"></div>
</body>
</html>
Advertisements