HTML and CSS Reference
In-Depth Information
Figure 9-20.
The border image is squeezed because the element doesn't have a default border
he
border-image-width
property accepts up to four values, which are allocated to each side in the same
way as slices. The values can be specified as lengths, percentages, or numbers. A number represents a multiple of
the computed
border-width
. Percentages are relative to the width or height of the border box for horizontal and
vertical slices, respectively.
The examples in border-image2.html and border-image3.html illustrate the difference between setting
border-image-width
on its own and creating a default border. The style rule for the
<div>
in border-image2.html
looks like this:
#poem {
/* Other styles omitted */
border-image-source: url(images/frame1.png);
border-image-slice: 24 fill;
border-image-width: 24px;
}
The value of
border-image-width
is set to
24px
, which is the same as the slices. However, there's no default
border around the element. On the other hand, border-image3.html omits
border-image-width
, but specifies a
basic border in addition to the border image like this:
#poem {
/* Other styles omitted */
border: 24px double #4B8896;
border-image-source: url(images/frame1.png);
border-image-slice: 24 fill;
}
In border-image2.html (Figure
9-21
, left), the border image is no longer squeezed because it has been given
a width. But there's no room in the border box, so it's displayed
inside
the
<div>
. However, in border-image3.html
(Figure
9-21
, right),
border-image-width
is not set, so the default value (
1
) is applied. This is a multiple of the
computed
border-width
, which the
border
shorthand property sets to
24px
. Because the border box is the same
width as the slices, the border image overrides the
24px
double border, which is displayed only in browsers that
don't support border images.