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 3.1-5 */
    -o-border-image:url(border.png) 30 30 round; /* Opera 11-12.1 */
    border-image:url(border.png) 30 30 round;
}

Try it yourself »

More "Try it Yourself" examples below.

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
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.borderImage="url(border.png) 30 30 round" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Note: See individual browser support for each value below.

CSS Syntax

border-image: source slice width outset repeat|initial|inherit;

Property Values

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 »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit