CSS border-image (Use Image as Border)

The CSS border-image property is used when we need to apply image as a border to an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 12px solid transparent; padding: 18px;
         border-image: url(images/border-image-demo.png) 20 stretch;}
   </style>
</head>
<body>

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

Output

This is a para.

In above example, consider the following CSS code:

20 stretch

Here 20 is the value of border-image-slice, and stretch is the value of border-image-repeat.

In above program, the image used is:

The border-image is basically the shorthand of following properties:

CSS border-image Syntax

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

border-image: source slice width outset repeat|initial|inherit;

In above syntax:

source - used to define the path of the image
slice - used to define the way to slice the image
width - used to define the width of the border image
outset - used to define the amount to extend the area of the border image, beyond the border box
repeat - used to define how the image should be scaled and tiled like rounded, stretched, or repeated etc.

Note - The initial keyword is used to set the default value. Whereas the inherit keyword is used to inherit the value from its parent.

CSS Online Test

« Previous Tutorial Next Tutorial »