HTML and CSS Reference
In-Depth Information
This diagram shows what's going
on. The
border-image
value of 80
specifies a pixel length, which the
browser uses to slice the image
into nine sections, each of which is
80 pixels square.
The four corner sections aren't
adjusted: they remain in the corners
of the elements. The center segment
expands to fill the remaining space.
Stretching and repeating border-image sections
In the previous example, the
middle segments on the sides are
also stretched, but you can't see
that because they're solid white.
To illustrate, let's look at an
example with a different image.
Let's apply the same rules with this
new image:
height: 400px;
width: 720px;
border-width: 80px;
border-style: solid;
border-image: url('border2.png') 80;
Now the stretching of the middle
segments on the sides is more
apparent.
