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.