BlogsDope image BlogsDope

CSS border-image-source

Aug. 20, 2018 IMAGE BORDER 1009

The border-image-source property is used to specify the path of the image which is to be used as the border.


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.


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.


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.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks

Please login to view or add comment(s).