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;
}
The most commonly used values are shown below −
| Sr.No. | Value & Description |
|---|---|
| 1 |
border-image-source Used to set the image path |
| 2 |
border-image-slice Used to slice the boarder image |
| 3 |
border-image-width Used to set the boarder image width |
| 4 |
border-image-repeat 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.
<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>
It will produce the following result −
.png)
Frequently Asked Questions
+
Ans: CSS3 - Rounded Corners view more..
+
Ans: CSS3 - Tutorial view more..
+
Ans: CSS - Validations view more..
+
Ans: CSS3 - Border Image
view more..
+
Ans: CSS3 - Multi Background view more..
+
Ans: CSS3 - Colors view more..
+
Ans: CSS3 - Gradients view more..
+
Ans: CSS3 - Shadow view more..
+
Ans: CSS3 - Text view more..
+
Ans: CSS3 - Web Fonts view more..
+
Ans: CSS3 - 2d Transforms view more..
+
Ans: CSS3 - 3D Transforms
view more..
+
Ans: CSS3 - Animation view more..
+
Ans: CSS3 - Multi Columns view more..
+
Ans: CSS3 - User Interface view more..
+
Ans: CSS3 - Box Sizing view more..
+
Ans: CSS - Responsive view more..
Recommended Posts:
Rating - NAN/5
Advertisements