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>