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.
Search WWH ::




Custom Search