May 05, 2021 CSS Reference Manual
Specifies the inward offset of the image border:
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
| Attributes | |||||
|---|---|---|---|---|---|
| border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Opera does not support border-image-slice properties.
The border-image-slice property is not supported by Internet Explorer 10 and earlier versions.
The border-image-slice property is not supported by Safari 5 and earlier versions.
The border-image-slice property specifies an inward offset of the image border.
| Default: | 100% |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.borderImageSlice="50% 50%" |
border-image-slice: number|%|fill;
Note: This property specifies an inward offset of the top, right, bottom, and left edges of the image, which is divided into nine areas: four corners, four edges, and one middle area. U nless the keyword fill is used, the middle part of the image is discarded. I f the fourth value/percentage is omitted, it is the same as the second value. I f the third value is omitted, it is the same as the first value. If the second value is omitted, it is the same as the first value.
| Value | Describe |
|---|---|
| number | A numeric value that represents pixels in an image (if it's a raster image) or vector coordinates (if it's a vector image). |
| % | Percentage value relative to image size: The width of the image affects the horizontal offset and the height affects the vertical offset. |
| fill | Keep the middle part of the border image. |
CSS3 tutorial: CSS3 border