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>
      p {border: 12px solid transparent; padding: 18px;
         border-image: url(images/border-image-demo.png) 20 stretch;}

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

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:

  • 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 »