CSS3 Border image

CSS Border image property is used to add image boarder to some elements.you don't need to use any HTML code to call boarder image.A sample syntax of boarder image is as follows −

#borderimg {

   border: 10px solid transparent;

   padding: 15px;

}

The most commonly used values are shown below −

Values

Description

border-image-source

Used to set the image path

border-image-slice

Used to slice the boarder image

border-image-width

Used to set the boarder image width

border-image-repeat

Used to set the boarder image as rounded, repeated and stretched

Example

Following is the example which demonstrates to set image as a border for elements

<html>

   <head>

 

      <style>

         #borderimg1 {

            border: 10px solid transparent;

            padding: 15px;

            border-image-source: url(/css/images/border.png);

            border-image-repeat: round;

            border-image-slice: 30;

            border-image-width: 10px;

         }

         #borderimg2 {

            border: 10px solid transparent;

            padding: 15px;

            border-image-source: url(/css/images/border.png);

            border-image-repeat: round;

            border-image-slice: 30;

            border-image-width: 20px;

         }

         #borderimg3 {

            border: 10px solid transparent;

            padding: 15px;

            border-image-source: url(/css/images/border.png);

            border-image-repeat: round;

            border-image-slice: 30;

            border-image-width: 30px;

         }

      </style>

    

   </head>

   <body>

      <p id="borderimg1">This is image boarder example.</p>

      <p id="borderimg2">This is image boarder example.</p>

      <p id="borderimg3">This is image boarder example.</p>

   </body>

</html>

It will produce the following result −

This is image boarder example.

This is image boarder example.

This is image boarder example.