Adding Borders and Drop Shadows - Beginning CSS3 - page 200

Figure 9-21. The border image is displayed inside the element if you don't create a default border
As border-image3.html demonstrates, there's no need to set border-image-width if you create a default border
that's the same size as the slices. The main value of border-image-width is if you want to scale the image slices.
Setting border-image-width to 12px in the preceding examples would rescale them to half their natural size.
The role of border-image-outset is to allow the border image to extend beyond the border box. For
example, border-image4.html sets both border-image-width and border-image-outset to 24px without creating
a default border. This has a similar effect to the styles in border-image3.html. The crucial difference is that the
top border is cut of by the top of the page. A normal border interacts with surrounding elements, altering their
relative positions. But border-image-outset puts the border image outside the border box. As a result, it can be
clipped by an ancestor or the viewport.
Setting How the Slices Fill the Sides
By default, the browser stretches each slice so that it fills the gap between the corners. It does so without changing
the height for the top and bottom slices, or the width for the right and left slices. However, the border-image-
repeat property lets you specify how to handle the slices with the following keywords:
stretch This is the default. The slices are scaled along the axis to fill the gap .
repeat The image is tiled from the center of the side to fill the gap.
round The image is rescaled if necessary to fill the gap an exact number of times.
space The image is repeated an exact number of times to fill the gap. If there's
insufficient space for an exact number, the extra space is distributed evenly leaving a
gap between individual tiles. This value is currently not supported by any browser .
If you use one keyword, it applies to all sides. If you use two keywords, the first applies to the top and bottom,
and the second applies to the right and left.
All the preceding examples have omitted border-image-repeat , so the default stretch has been used.
Choosing the best option(s) depends entirely on the image you're using. For the pattern used in the example files,
round is best for all four sides, but border-image5.html (see Figure 9-22 ) sets the top and bottom to stretch and
the sides to round like this:
border-image-repeat: stretch round;