Border-image: using images for your border
Another exciting new border feature of CSS3 is the propertyborder-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;
Which results in:
Lorem ipsum dolor sit amet.
Or:
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:
Number two:
No comments:
Post a Comment