div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Try it yourself »
More examples at the bottom of this page.

Browser Support

The border-image property is supported in Firefox, Chrome, and Safari 6.

Opera supports an alternative, the -o-border-image property.

Safari 5 supports an alternative, the -webkit-border-image property.

Definition and Usage

The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

Omitted values are set to their default values.

Tip: Use the border-image-* properties to construct beautiful scalable buttons!

Default value:	none 100% 1 0 stretch
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.borderImage="url(border.png) 30 30 round"

Syntax

border-image: source slice width outset repeat;

Value	Description	Play it
border-image-source	The path to the image to be used as a border
border-image-slice	The inward offsets of the image-border
border-image-width	The widths of the image-border
border-image-outset	The amount by which the border image area extends beyond the border box
border-image-repeat	Whether the image-border should be repeated, rounded or stretched	Play it »