border-image-slice sets how a border image is sliced.
There are 9 slices: four corners, four edges, and the middle.
A border with a border-image-slice of 40%.
<style>
.border-image-slice-40 {
border: 20px solid transparent;
padding: 15px;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
border-image-slice: 40%;
}
</style>
<div class="border-image-slice-40">
Element with border image slice setting
</div>
border-image-slice: number | % |
fill | initial | inherit;
| Value | Description |
|---|---|
| number | Number(s) represent pixels for raster images or coordinates for vector images |
| % | Percentages are relative to the height or width of the image |
| fill | Displays image middle part |
| 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-slice values.
<style>
.border-image-slice-example {
border: 20px solid transparent;
padding: 15px;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
border-image-slice: 10;
}
</style>
<div class="border-image-slice-example">
Element with border image slice setting
</div>
This table shows when border-image-slice 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 |
