HTML and CSS Reference
The value for border-image property is comprised of an image reference,
a description where the image is divided to create nine segments, how
those segments are positioned, and finally a description of how they tile
to fill the available area.
The border-image-source property accepts a reference to the image
used as the border image.
border-image-slice defines where the four lines that slice an image
into segments are positioned, inset from each of the four sides of the
image. For the image displayed in Figure 14.6, it would make sense to
position these dividing lines 30 pixels from each edge to create nine even
segments. The distance from each edge can be measured by the follow-
■ <number> : The number of pixels (or the coordinates for SVG images).
Pixel units are implied for bitmap background images, and the unit
should be left off.
■ <percentage> : A percentage value based on the dimensions of
A width for the border can optionally be assigned via the
border-image-slice property by adding a forward slash ( / ) after the
slice position values. These width measurements are the same as the
border-width property, and if both properties are set, then the border
width values set as part of border-image-slice override those set in
the border-width property. The following example sets the slices that
segment the image to be 30 units from each edge, with a border width of
30 pixel for the top and bottom border and 15 pixel for the left and right.