CSS3 border-image Property

Example

Specify an image as the border around a div element:

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;
}

---

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
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  +CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu