HTML and CSS Reference
In-Depth Information
Applying a Border Image
Kevin wants you to change the appearance of the main photo of his great-grandfather by
adding a graphic border that will make the photo look like it came from a torn piece of
paper. Starting with CSS3, graphic borders can be created from any image file. To create a
graphic border, imagine an image file sliced into nine pieces as displayed in Figure 8-30.
figure 8-30
slicing an image to create a border image
frame.png
border slices
slices are stretched
to match the image
border
border-image: url(frame.png) 20 stretch;
The nine pieces consist of four corners, four sides, and the interior piece. The inte-
rior piece is ignored (it's where the content of the object will appear), the four corners
become the corners of the border, and the four sides are stretched or tiled to fill in the
four sides of the border. Graphic borders are applied to an object using the CSS3 style
border-image: url(
url
)
slice repeat
;
where
url
is the source of the border image file,
slice
is the size of the border image
cut off to create the borders, and
repeat
indicates whether the side borders should be
stretched to cover the object's four sides or tiled. For example, the style
border-image: url(frame.png) 10 stretch;
