HTML and CSS Reference
border-image: url (border.png) 30 30 30 30 round round;
FIGURE 4.35 Slicing up the
image samurai style.
B: right slice
A: top slice
C: bottom slice
D: left slice
border-image: url(border.png) 30 30 30 30 round;
As you'd expect, the url() syntax points to the image you want to use for the
The four numbers after that specify the widths of the border slices (be mindful
that these are numbers of pixels, even though they have no units) you want to chop
the image into. In order, they refer to the top slice, the right slice, the bottom slice,
and the left slice, as indicated in Figure 4.35 .
Yo u c a n s e it it h e s l i c e s it o a n y s i z e y o u l i k e , b u it i it o b v i o u s l y m a k e s s e n s e it o d i v i d e
the image so the slices in the border contain the parts of the image you want. As
logic would suggest, because in this case all four slices are the same size, you could
write the border-image line using two values or one value, like so:
border-image: url(border.png) 30 round;
NOTE: Yo u c a n a l s o u s e p e r c e n t a g e va l u e s t o s p e c i f y
the slice sizes; note that the pixel values shouldn't have
px units. If you include these (e.g., 30px), it won't work.