Borders and backgrounds with CSS3 - HTML5 and CSS3 - page 376

repeat retains the width
of the center segment—
if it doesn't fit across
the width of the box,
then parts of the
segment are cut off.

round adjusts the
width of the center
segment to fit a
whole number of times
across the width.

When you have a middle segment that makes a repeated pattern,
round will usually be what you want. If the middle segment is a
solid color or gradient, like a beveled edge, use repeat to
avoid any distortion from the browser adjusting the image.

You may be curious about what hap-
pens to the middle segment when you
use repeat or round . This screenshot
shows that the middle behaves in the
same way as the middle segments on
the border:

border-image:
url('border3.png') 80 fill round;
If you ever need to create internet
bank notes, this may be the way to go.

You can also use different approaches
on the horizontal and vertical borders:
border-image:
url('border3.png')
80 fill round stretch
The first keyword applies to the hori-
zontal borders, and the second to the
vertical borders.