106 Chapter 9
You can see a comparison of this in Figure 9-11; the element on the
left has the default border-image-outset value of 0, whereas the element on
the right has the value shown in the code example; although each has an
identical box size, the border image on the right is greatly outset from the
content (and even overlaps the element on the left).Figure 9-11: The element on the right has an outset border image.border-image-repeat
One more property is related to border images: border-image-repeat. This
property controls how the image fits the length of each side between the
corners:E { border-image-repeat: keyword; }It accepts one of three keyword values: stretch (the default), repeat, and
round. All of the example illustrations so far in this chapter used the default
value (stretch), where the image slice is stretched to fill the length of the
border. Using repeat applies the slice at its natural length, repeating the
slice until it fills the length of the border it is applied to; so the slice could
be cut off if it didn’t fit into the length a whole number of times. The final
value, round, behaves like repeat except it scales the slice up or down to best
fit the length of the border, without being cut off.
That’s easier done than said, so you can see the difference in these
three values in Figure 9-12. These three elements have the same values
applied to all of the border-image properties, except for border-image-repeat.
For this property, the first element has the default value, stretch; the sec-
ond, repeat; and the final element, round.Figure 9-12: Different border-image-repeat values: (from left to right) stretch, repeat, round