Description

Border-image enables the use of images as borders. It overrides the border-style property which can act as a fallback if the image is unavailable or border-image in not supported.
Border-image is shorthand for the following properties with there initial values:
border-image-source: none;
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;

The image can be sliced using 4 length values: top, right, bottom, left. Which creates a grid of 9 areas, the 4 corners, 4 sides and the center which is unused.
border-image example
The image will be scaled to fit the border-width if necessary.

When using a border image you can reduce the dimensions of the image as the sides can be repeated or stretched.
border-image example 2
Currently support for the shortcut border-image seems better then the individual properties.
Not all browsers browsers fall back to the border-style if the image is unavailable.

See also:
http://border-image.com/
http://www.w3.org/TR/css3-background/#border-images

Live Example
Play with the code in the textarea below.

Default value
see individual properties
Introduced in CSS version
3
Applies to elements
All elements except tables with when border-collapse set to collapse.
Inherited
No
Browser Support
BrowsersIEFirefoxSafariOperaChrome
Versionsunknown156.0-o-16
Belongs to:

See the full list CSS properties and browser support: CSS Properties