HTML and CSS Reference
In-Depth Information
border-image: url (border.png) 30 30 30 30 round round;
A
B
C
D
FIGURE 4.35
Slicing up the
image samurai style.
B: right slice
30 px
30 px
A: top slice
C: bottom slice
30 px
30 px
D: left slice
border-image: url(border.png) 30 30 30 30 round;
border-width: 30px;
As you'd expect, the
url()
syntax points to the image you want to use for the
border.
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.
