Example
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.
| Property | |||||
|---|---|---|---|---|---|
| borderImage | 16.0 4.0 Webkit |
11.0 | 15.0 3.5 Moz |
6.0 3.1 Webkit |
15.0 11.0 O |
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
< Style Object