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 works in Safari and Firefox 3.1 (Alpha). The syntax to use it is:

border-image: url(border.png) 27 27 27 27 round round;

Or:border-image: url(border.png) 27 27 27 27 stretch stretch;

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

Number one:

Number two:

Thanks css3.info