The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

(C. Jardin) #1
Border and Box Effects 103

Figure 9-7: Where the specified values in
border-image will slice the image


You can see in Figure 9-8 how this code is applied: the top and bot-
tom image slices have the same height as the top and bottom borders, so
the image is applied at its natural height, whereas the left and right slices
are applied to borders that are less than half their width, so the image
is squashed to fit. The corner slices are distorted to fit the two different
dimensions.


Figure 9-8: Here, 34px image slices are applied to a
border of 34px horizontally and 10px vertically.

Free download pdf