CSS3 Border Images
The CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element.
CSS3 Border Properties
Property Description
border-image Setting the border-image-'property'
border-image-source Set the image path
border-image-slice Slice the border image
border-image-width Specifies the width of the border image
border-image-repeat Border image should be repeated, rounded or stretched
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Border Images</title>
<style type="text/css">
.border_image_1 { 
border:10px solid transparent; 
padding:10px; 
border-image-source:url(images/bg_1.jpg); 
border-image-repeat:round; 
border-image-slice:30; 
border-image-width: 10px;
}
 
.border_image_2 { 
border:10px solid transparent; 
padding:20px; 
border-image-source:url(images/bg_1.jpg); 
border-image-repeat:round;border-image-slice:30; 
border-image-width:20px;
}
 
.border_image_3 { 
border:10px solid transparent; 
padding:30px; 
border-image-source:url(images/bg_1.jpg); 
border-image-repeat: round; 
border-image-slice:30; 
border-image-width:30px;
}
</style>
 
</head>

<body>

<p class="border_image_1">image boarder sample text.</p>
<p class="border_image_2">image boarder sample text.</p>
<p class="border_image_3">image boarder sample text.</p>

</body>
</html>    
Output :

image boarder sample text.

image boarder sample text.

image boarder sample text.

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.