CSS3 Border Images, TutorialsPoint, CSS3 Border Images Tutorial

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.

CSS3 Tutorial