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

Standard Prefixed

4.0 -

3.5 -

- -

10.5 -

3.0 -

Let's start with the simplest possible
example and apply the border image
to an element 720 pixels wide and
400 pixels high:

height: 400px;
width: 720px;
border-width: 80px;
border-style: solid;
border-image: url('border1.png') 80;

As you can see, the center disappears.

If you want to retain the center of the
image, use the fill keyword:

height: 400px;
width: 720px;
border-width: 80px;
border-style: solid;
border-image:
url('border1.png') 80 fill;

The center of the image is stretched
to fill the space, but the corners stay
where they are.