Border-image: using images for your border
Another exciting new border feature of CSS3 that works in Safari 3 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-imageborder-right-imageborder-bottom-imageborder-left-image
border-corner-image:border-top-left-imageborder-top-right-imageborder-bottom-left-imageborder-bottom-right-image
An easy way to use this is like this:
-webkit-border-image: url(border.png) 27 27 27 27 round round;
Which results in:
Lorem ipsum dolor sit amet.
Or:
-webkit-border-image: url(border.png) 27 27 27 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.
Number one:
Number two:
