CSS3 Border Images

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.

The most commonly used values are shown below :

* 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.

Example:

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

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *