# css3 property `border-image`

Using the border-image property, you can use an image to act as an element's border. Images can be set to stretch, repeat or round.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: url(border.png) 27 27 27 27 round round;`

border-image currently works in Safari and Firefox 3.1 (Alpha). The syntax to use it is:

The stretch and repeat values are fairly self-explanatory. The round value still repeats the image but compresses the image to fit the element width without showing only parts of the image itself.

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.

## Tutorials:

## Browser compatibilty

http://www.css3.info/modules/compatibility-table-backgrounds-and-borders-module/