CSS border-image-source Property

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

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()";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .border { 
      border: 10px solid transparent;
      padding: 15px;
      border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");  
      border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <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%">
  </body>
</html>

Values

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

15.0+ 11.0+ 12.0+ 15.0+ 6.0+ 15.0+

Practice Your Knowledge

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




Related articles