Style borderImage Property

❮ Style Object


Specify an image as the border around a <div> element:

/* Code for Safari 5 and earlier */
document.getElementById("myDIV").style.WebkitBorderImage = "url(border.png) 30 30 round";

/* Standard syntax */
document.getElementById("myDIV").style.borderImage = "url(border.png) 30 30 round";
Try it Yourself »

Definition and Usage

The borderImage property is a shorthand property for setting the borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset and borderImageRepeat properties.

Omitted values are set to their default values.

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.

borderImage 16.0
4.0 Webkit
11.0 15.0
3.5 Moz
3.1 Webkit
11.0 O


Return the borderImage property:

Set the borderImage property: = "source slice width outset repeat|initial|inherit"

Property Values

Value Description
borderImageSource The path to the image to be used as a border
borderImageSlice The inward offsets of the image-border
borderImageWidth The widths of the image-border
borderImageOutset The amount by which the border image area extends beyond the border box
borderImageRepeat Whether the image-border should be repeated, rounded or stretched
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: none 100% 1 0 stretch
Return Value: A String, representing the border-image property of an element
CSS Version CSS3

Related Pages

CSS reference: border-image property

❮ Style Object