HTML and CSS Reference
In-Depth Information
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
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-
ing values:
■
<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
the image.
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.
