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:

border image demo

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:

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 »


Liked this post? Share it!