Style borderImage Property
Example
Specify an image as the border around a <div> element:
document.getElementById("myDIV").style.borderImage = "url(border.png) 30 30 round";
Try it Yourself »
Description
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.
Property | |||||
---|---|---|---|---|---|
borderImage | 16.0 | 11.0 | 15.0 | 6.0 | 15.0 |
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 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