CSS border-image-source: Define the Source of the Border Image

The CSS border-image-source property is used to specify the source or 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 the above example, the border property sets the width, style, and color of an element's border. The border in this case has a width of 15 pixels, a solid style, and a transparent color.

Now the padding property specifies the amount of space between the content of an element and its border. The padding is set to 10 pixels in this case.

Then the border-image-source property specifies the image to be used as an element's border. The image file's URL in this case is images/border-image-demo.png.

Finally, the border-image-slice defines how the border image should be sliced and stretched to fit the element's border. The value of 12 in this case indicates that the border image should be divided into 9 equal parts (4 corners, 4 edges, and 1 middle), with only the middle part stretched to fit the element's border.

In the above program, the image used is:

border image demo

CSS border-image-source syntax

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

border-image-source: x;

The value of x should be any of the following:

Advantages of the border-image-source property in CSS

Disadvantages of the border-image-source property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!