Border Images Use in CSS

In CSS, the Border Image Property is used to add Image Border to some Elements. You do not need to use any HTML code to call Border Images.

Syntax

#borderimg {
   border: 15px solid transparent;
   padding: 25px;
}

Value:-border-image-source

Description:- Border Image Source is used to set the image path.

Value:-border-image-slice

Description:-Border Image Slice is used to slice the Border Image.

Value:-border-image-width

Description:-Border Image Width is used to set the width of the Border Image.

Value:-border-image-repeat

Description:-Border Image Repeat is used to set the Border Image as Rounded, Repeated and Stretched.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Example of CSS Border Images</title>
      <style>
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 13px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 23px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 33px;
         }
      </style>
      
   </head>
   <body>
      <p id="borderimg1">image boarder example</p>
      <p id="borderimg2">image boarder example</p>
      <p id="borderimg3">image boarder example</p>
   </body>
</html>

Border Images Use in CSS

Recent Posts