HTML and CSS Reference
In-Depth Information
The
border-image-width
can be either a percentage value (or four percentage values for the top, right, bottom,
and left), which causes the border's width to be a certain percentage of the element it is applied to, or a number (or
four numbers for top, right, bottom, and left), which is a multiplication of the calculated
border-width
. If you
specify a
border-image-width
of
4
, the
border-image-width
is 16px = 4px × 4.
As shown in Figure 5-7, the border image is now applied to the footer in Google Chrome (other browsers don't work
until the shorthand
border-image
property is added). At the moment, though, the border image is stretched be-
cause the
border-image-repeat
property's default value is
stretch
. You can fix that…
Figure 5-7
The border image stretched across the footer.
border-image-repeat
Initial value:
stretch
| Inherited: No | Applies to: All, except internal table elements when
border-collapse is
collapse
| CSS3
Unprefixed browser support: Firefox 15+, Chrome 15+
The reason the border image is currently stretched is that the initial value of
border-image-repeat
is
stretch
.
1.
In styles.css, below the
border-image-slice
declaration, add the following:
border-image-repeat: repeat;
2.
Save styles.css.
This tells the browser to take each of the nine slices and repeat them where necessary (see Figure 5-8). Because
you're applying only this border image to the top border, the top edge slice (or tile) of the nine slices is repeated until
it fills the area.
Figure 5-8
The border image repeating across the footer.
The Backgrounds and Borders module also describes two other values that can be used:
round
and
space
. Note
that at present no browsers support these values.
round
repeats the image, but if the repeated tile does not fill the
area using a whole number of tiles, it rescales the image so it does.
space
also repeats, but if the tile does not fill
the area in the same way, the extra space is distributed around the tiles.
border-image-outset
