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

Custom Search