CSS border-image-source property specifies the location/source of the image to be used as an element’s border.
It is to be noted that if we set an image as border, it overrides all existing borders specified by border-style property. However, if the specified image can not be loaded or displayed or border-image-source is set to none, the existing border styles will be used instead.
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-image-slice: 30;
border-image-repeat: round;
}
Note: The border-image-source property is used in conjunction with the border-image-slice and border-image-repeat property which decides how the image will appear around the element.
CSS Syntax
The border-image-source property has the below syntax:
border-image-source: none|url(source)|initial|inherit;
Property Values
The border-image-source property accepts the following values:
| none | This is the default value. No image will be used as border. |
| url(source) | Specifies the location/source of the image to be used as a border. |
| initial | Sets the border-image-source property to its default value(none). |
| inherit | Inherits the border-image-source property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.borderImageSource = “url(images/border-diamonds.png)”; |
Related Pages
CSS Tutorial: CSS Borders
