The border-image-source property sets the border image URL.
The URL can be relative or absolute.
An image border using border-image-source.
<style>
.border-image {
border: 20px solid transparent;
padding: 15px;
border-image-source: url(/img/css/wheatfield-with-crows.jpg);
border-image-repeat: repeat;
}
</style>
<div class="border-image">
An element with border-image-source setting.
</div>
border-image-source: none | image | initial | inherit;
| Value | Description |
|---|---|
| none | No image will be used |
| image | Path or URL of the image to be used as a border |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-color values.
<style>
.border-image-example {
border: 20px solid transparent;
padding: 15px;
border-image-source: url(/img/css/wheatfield-with-crows.jpg);
}
</style>
<div class="border-image-example">
An element with border-image-source setting.
</div>
This table shows when border-image-source support started for each browser.
 Chrome
|
15.0 | Oct 2011 |
 Firefox
|
15.0 | Aug 2012 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
15.0 | May 2013 |
 Safari
|
6.0 | Jul 2012 |
