Border-image: using images for your border

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.
These two values are shorthands for:

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image currently does not work in Opera and IE.

Let’s start. I use this image for borders:

The syntax to use it is:

1
2
3
4
5
6

-o-border-image: url('border.gif') 27 round round;
-icab-border-image: url('border.gif') 27 round round;
-khtml-border-image: url('border.gif') 27 round round;
-moz-border-image: url('border.gif') 27 round round;
-webkit-border-image: url('border.gif') 27 round round;
border-image: url('border.gif') 27 round round;

Which results in:

Lorem ipsum dolor sit amet.

Or:

1
2
3
4
5
6

-o-border-image: url('border.gif') 27 stretch stretch;
-icab-border-image: url('border.gif') 27 stretch stretch;
-khtml-border-image: url('border.gif') 27 stretch stretch;
-moz-border-image: url('border.gif') 27 stretch stretch;
-webkit-border-image: url('border.gif') 27 stretch stretch;
border-image: url('border.gif') 27 stretch stretch;

Which then results in:

Lorem ipsum dolor sit amet.

For those of you not so lucky as to be able to see this, here are screenshots of the two examples.

The First Example:

The Second Example:

Also use:
-moz-border-image – for Firefox
-o-border-image – Opera
-khtml-border-image – KDE
-webkit-border-image – Safari
-icab-border-image – iCab

Read an original specification here

CSS3 info