HTML and CSS Reference
In-Depth Information
The pattern fits neatly inside the
middle segments, each 80 pixels
square. As you saw before, the cor-
ners stay the same but the middle
segments are stretched. This is
because when you omit the third
parameter to
border-image
, you get
the default. The previous example is
equivalent to this:
border-image:
url('border2.png') 80 stretch;
You can use two other keywords
instead of
stretch
. The first is
repeat
:
height: 400px;
width: 720px;
border-width: 80px;
border-style: solid;
border-image:
url('border2.png') 80 repeat;
The image in the middle segment is
repeated across the available width
and height.
The second is
round
:
border-image:
url('border2.png') 80 round;
It looks like there's no difference
between
repeat
and
round
, but that's
due to a careful choice of element
size to demonstrate the technique.
If the size of the element is reduced
slightly, the difference is apparent.
Look at the following two screen-
shots of the same two rules applied
to a 680
x
360-pixel element.
