CSS3 - Border Image
CSS3 - Border Image
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.A sample syntax of boarder image is as follows −
#borderimg {
border: 10px solid transparent;
padding: 15px;
}
border-image-source
1
Used to set the image path
border-image-slice
2
Used to slice the boarder image
border-image-width
3
Used to set the boarder image width
border-image-repeat
4
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.
Live Demo
<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>