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>
To Continue Learning Please Login
Login with Google