HTML and CSS Reference
Table 9-4. Individual Properties for Border Images
Specifies the image to use for borders.
Sets the inward offsets from each side of the image, dividing it
into four corners, four edges, and a center section.
Sets the amount of space allocated to the border image on each side.
Specifies how far the border image should extend beyond the
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
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
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).