CSS Property border-image-source








The border-image-source property sets an image url.

If the value is "none", or if the image cannot be used, the border styles will be used.

Summary

Initial value
none
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.borderImageSource="url(border.png)"
Animatable
no

CSS Syntax

border-image-source: none|image;

Property Values

none
No image
image
URL for the image

Browser compatibility

border-image-source Yes 11.0 Yes Yes Yes




Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!-- ww w. ja va2  s.  com-->
    background-color: lightgrey;
    border: 30px solid transparent;
    border-image: url('http://java2s.com/style/demo/border.png');
    border-image-slice: 30;    
}
</style>
</head>
<body>
    <div>
    This DIV uses an image as a border.
    </div>
    <p>Here is the image used:</p>
    <img src="http://java2s.com/style/demo/border.png">
</body>
</html>

Click to view the demo