The border-image-width property sets the image border width.
It accepts any length value, such as, px, %, em, etc.
If no value is provided, it inherits the border-width value.
An element with a border-image-width value of 25 pixels.
<style>
.border-image {
border: 25px solid transparent;
padding: 15px;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
border-image-width: 25px;
}
</style>
<div class="border-image">
An element with a border-image-width setting
</div>
border-image-width: number | % | auto | initial | inherit;
| Value | Description |
|---|---|
| length | Border width in pixels |
| number | Default value is 1. Multiples of the corresponding border-width |
| % | Size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets |
| auto | Width is the intrinsic width or height of the corresponding image slice |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-image-width values.
<style>
.border-image-example {
border: 20px solid transparent;
padding: 30px;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
border-image-width: 2;
}
</style>
<div class="border-image-example">
An element with a border-image-width setting
</div>
This table shows when border-image-width support started for each browser.
 Chrome
|
15.0 | Oct 2011 |
 Firefox
|
13.0 | Jun 2012 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
15.0 | May 2013 |
 Safari
|
6.0 | Jul 2012 |
