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
