The border-image-slice property defines from one to four lengths that set the distance from each edge of the image marking the area that will be used to cut, or slice, up our border image. The border-image-slice property values represent inward offsets from the top, right, bottom, and left (TRouBLe) edges respectively of the image. In effect, with the four lines you define, the browser divides the one border image into nine regions: four corners, four edges and a middle. The four corners maintain their exact size. The other five values can be stretched or repeated or a combo of the two (round), depending on the values of the other border-image properties.
With the following image examples, we’ve sliced the image 28px in from each side for the first image of orange diamonds, 35 px for the 2nd image of the reddish gradient, and 8 pixels in from each side of the 3rd image, the light blue stamp. The black lines dissecting each image delineate how the four defined slice lines cut up our border-image.
It would be as if we had written:
.diamonds { border-image-slice: 28 28 28 28; }
.gradient { border-image-slice: 35 35 35 35; }
.stamp { border-image-slice: 8 8 8 8; }
Since the values are repeated, like the TRBL of border or padding, we can use a single value for all four sides:
.diamonds { border-image-slice: 28; }
.gradient { border-image-slice: 35; }
.stamp { border-image-slice: 8; }
Note there were no length units used. For slice values in length, omit the units if the value is in pixels. If using percentage values, include the percent. To get the same border with percentages, we would write:
.diamonds { border-image-slice: 34.6%; }
.gradient { border-image-slice: 36%; }
.stamp { border-image-slice: 26.7%; }
(To calculate percentage: [Slice in Pixels] x 100, divided by [Total Pixels of Image's Width] = [#%].)
For bitmap images, the omitted values are interpolated as pixel values. For vector images (SVG), the values are coordinates. For percentages use the percent sign (%).
