CSS3 Click Chart | CSS3 Browser Support and Information

Border Images

Allows a repeating or stretched image to appear on an element's border.

Specification

Example Code

.element {
    border-width: 20px;
    -webkit-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
    -moz-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
    border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
}

Live Demonstration

Resize this box using the bottom-right handle and the image on the border will stay fluid.

Desktop Browser Support

Standard Syntax:
Chrome 16+, Firefox 15+, Opera 10.5+ (Shorthand only), Safari 6+

Vendor Prefix (shorthand only):
Firefox 3.5+, Chrome 4+, Safari 3.1+

Longhand Vendor Prefix:
Chrome 15+

Tools / Polyfills

CSS3 PIE

Tutorials / Articles

CSS3 Border Images on SitePoint
Understanding Border Image
CSS border-image changes and unprefixing