The border-image-source property is used to specify the path of the image which is to be used as the border.
CSS
border-image-source: <image>;
Note that an image border overrides the border set by the border-styleproperty. However, if the value of the border-image-source property is none, or if the border image fails to load, then the border is set by the border-styleproperty.
Values
none : No border image is used. This is the default value.
<image> : Specifies the path of the image to be used.
initial : Sets the default value.
inherit : Inherits the value from parent element.
Examples
Check out the following demo.
You can give the color value in various specifications. A few are shown in the following demo.
Some of these color specifications may not be supported by some browsers. In that case, the property takes the default color value.
See the Pen CSS border-image-source by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in all the major browsers.
