CSS border-image-source Property

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.


  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:

noneThis 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.
initialSets the border-image-source property to its default value(none).
inheritInherits the border-image-source property from the parent element.

General Info

Default Valuenone
JavaScript Usageelement.style.borderImageSource = “url(images/border-diamonds.png)”;

Related Pages

CSS Tutorial: CSS Borders


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment