CSS border-image-source (Define Source of Border Image)

The CSS border-image-source property is used to specify the source or the path of the image, used to create the border around an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 15px solid transparent; padding: 10px;
         border-image-source: url(images/border-image-demo.png);
         border-image-slice: 12;}
   </style>
</head>
<body>

   <p>This is a para.</p>
   
</body>
</html>
Output

This is a para.

In above program, the image used is:

border image demo

CSS border-image-source Syntax

The syntax of border-image-source property in CSS, is:

border-image-source: x;

The value of x should be any of the following:

  • imagePath - used to specify the source or path of image
  • none - used to specify no image
  • initial - used to set the default value
  • inherit - used to inherit and set the value from its parent

CSS Online Test


« Previous Tutorial Next Tutorial »