HTML and CSS Reference
In-Depth Information
FIGURE 4.36
border-image
fragments look shoddy.
FIGURE 4.37
stretch
is OK for
very small variations in con-
tainer size but looks terrible if
your containers greatly differ
in size from the original image.
After slicing the image, it is applied to the borders of your container: The four
corners remain the same. The four sides all tile in one dimension to fill up the
borders, however long they are (although see the end of this section for browser
differences). The center of the image tiles in both directions to fill up the remain-
ing background space.
How do you control the manner in which the tiling of the sides is handled?
Yo u u s e t h e
round
keyword.
round
specifies that the browser should always show a
whole number of repeated border segments and no incomplete fragments, adjust-
ing the size of each segment to maintain the desired result. If you try increasing or
decreasing the browser window width in Opera, Firefox, and IE, you'll see that the
size of the balls adjust slightly. Unfortunately, WebKit-based browsers treat
round
the same as
repeat
, another value that just tiles the side slices until they fill up
each side without rounding. You are therefore left with fragments at each end of
the sides, which don't look great (
Figure 4.36
).
Fragments might look OK as long as you plan the shape of your slices carefully
and make sure they don't differ much in height along their course. Another value
to be aware of is
stretch
, which is the default. If you swap
round
for
stretch
in
this example or omit it altogether, you'll get the result shown in
Figure 4.37
.
Again, note that I've specified one value here for the repeating behavior of all
four sides. If you want to specify different behavior for different sides, you could
use two or four sides as logic would suggest; for example,
round stretch
or
round
stretch round stretch
.
