CSS3 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 Sample: 

 

 

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:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s