HTML and CSS Reference
In-Depth Information
Table 9-4.
Individual Properties for Border Images
Property
Initial Value
Description
border-image-source
none
Specifies the image to use for borders.
border-image-slice
100%
Sets the inward offsets from each side of the image, dividing it
into four corners, four edges, and a center section.
border-image-width
1
Sets the amount of space allocated to the border image on each side.
border-image-outset
0
Specifies how far the border image should extend beyond the
border box.
border-image-repeat
stretch
Specifies how the slices are scaled and tiled along the horizontal
and vertical edges.
The first two properties,
border-image-source
and
border-image-slice
, are required. The other properties
are optional.
Specifying the Image and Its Slices
he
border-image-source
property tells the browser which image to use for the borders. You specify the image in
the normal way with
url()
.
he
border-image-slice
property defines how the image should be sliced up. It expects 1-4 numbers or
percentages that indicate how much of each side should be used for the border. The values are treated in a similar
way to
margin
and
padding
shorthand, namely:
One value:
Applies to all sides.
Two values:
The first value applies to the top and bottom, and the second to the right
and left sides.
Three values:
The first value applies to the top, the second to the right and left sides,
and the third one to the bottom.
Four values:
The values apply to each side starting from the top and moving clockwise.
The unusual aspect of using numbers with
border-image-slice
is that they're not followed by a unit of
measurement, such as
px
or
em
. This is because the property is intended to be used with scalable vector graphics (SVG)
as well as JPEG, PNG, or GIF images. When using an ordinary image, the value is the number of pixels measured from
the edge that you want to use as the slice. If you're using an SVG image, the numbers are vector coordinates.
Percentage values for top and bottom are relative to the image's height. Those for the right and left are
relative to the image's width.
According to the specification, the center slice should be discarded. To preserve the center slice, add the
fill
keyword.
Controlling the Size and Position of the Border Image
he
border-image-width
property sets the width of the slices,
not
the width of the border. It's a subtle, but
important difference. Border images are normally displayed within the element's border box (see Figure 8.18 in
Chapter 8). If you don't create a border around the element using the properties described at the beginning of this
chapter, there's no space between the border and padding boxes. Consequently, the image won't be displayed or
will be squeezed to almost nothing. Figure
9-20
shows what happens when using border images generated from
24px
slices without setting a default border to accommodate them (the code is in border-image1.html).
