The border-image property specifies an image as border.
Instead of a solid color, the border is drawn with an image.
An element with an image as border.
<style>
.border-image {
padding: 20px;
border: 20px solid transparent;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
}
</style>
<div class="border-image">
A element with an image border.
</div>
The border-image property is a shorthand for the following:
border-image: URL slice width outset repeat |
initial | inherit;
| Value | Description |
|---|---|
| border-image-source | URL or path to the image |
| border-image-slice | Border image slice |
| border-image-width | Border image width |
| border-image-outset | Amount the border-image area extends beyond the border-box |
| border-image-repeat | Sets if the image should be repeated, rounded or stretched |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
A stretched border image, filling the entire element width and height.
<style>
.border-image-stretched {
border: 10px solid transparent;
padding: 15px;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 stretch;
}
</style>
<div class="border-image-stretched">
Stretched image to fill the area.
</div>
You can use gradients to create an element's border.
<style>
.border-wrap {
max-width: 350px;
padding: 15px;
position: relative;
background: linear-gradient(to right, orangered, purple);
}
.content {
background: #fff;
color: #000;
padding: 20px;
}
</style>
<div class="border-wrap">
<div class="content">
An element with a gradient border
</div>
</div>
This table shows when border-image support started for each browser.
 Chrome
|
16.0 | Dec 2011 |
 Firefox
|
15.0 | Aug 2012 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
15.0 | May 2013 |
 Safari
|
6.0 | Jul 2012 |
