w3docs logo

CSS border-image-source Property

The CSS border-image-source property sets the source image for creating an element's border image.

The border-image-source property is one of the CSS3 properties.

If the value is set to "none", or if the image cannot be displayed, the border styles will be used.

Initial Value none
Applies to All elements, except internal table elements when border-collapse is "collapse". It also applies to ::first-letter.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.borderImageSource = "url()";


border-image-source: none | image | initial | inherit;

Example of the border-image-source property:

<!DOCTYPE html>
    <title>Title of the document</title>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 15;
    <h2>Border-image-source property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%">


CSS border-image-source description


Value Description
none No image will be applied.
image The path to the image is applied as a border.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

chrome edge firefox safari opera
15.0+ 12.0+ 15.0+ 6.0+ 15.0+

Practice Your Knowledge

Which statement is correct about CSS border-image-source property?

Do you find this helpful?