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:
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;
url('border2.png') 80 repeat;
The image in the middle segment is
repeated across the available width
and height.
The second is round :
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.
Search WWH ::

Custom Search