Style borderImageProperty
Style ObjectExamples
Specify an image as the border around a div element:
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 settingborderImageSource、 borderImageSlice、 borderImageWidth、 borderImageOutsetandborderImageRepeatproperties.
Omitted values are set to their default values.
Browser Support
Internet Explorer 11, Firefox, Opera 15, Chrome, and Safari 6 support the borderImage property.
Safari 5 supports an alternative property, the webkitBorderImage property.
Syntax
Return the borderImage property:
object.style.borderImage
Set the borderImage property:
object.style.borderImage="source slice width outset repeat|initial|inherit"
Property Values
| Value | Description |
|---|---|
| borderImageSource | The path to the image to be used for drawing the border. |
| borderImageSlice | The inward offset of the image border. |
| borderImageWidth | The width of the image border. |
| borderImageOutset | The amount by which the border image area extends beyond the border box. |
| borderImageRepeat | Specifies whether the image border is tiled (repeated) or stretched. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
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 Articles
CSS Reference Manual:border-image property
Other Extensions