CSS3 मे Border Image Property का उपयोग कुछ Elements मे Image Border को जोड़ने के लिए किया जाता है. आपको Border Images को Call करने के लिए किसी भी HTML Code का उपयोग करने की आवश्यकता नही होती है.
#borderimg {
border: 10px solid transparent;
padding: 15px;
}
| Values | Description |
|---|---|
| border-image-source | Border Image Source का उपयोग Image Path को Set करने के लिये किया जाता है. |
| border-image-slice | Border Image Slice का उपयोग Border Image को Slice करने के लिये किया जाता है. |
| border-image-width | Border Image Width का उपयोग Border Image की Width को Set करने के लिये किया जाता है. |
| border-image-repeat | Border Image Repeat को Border Image को Rounded, Repeated और Stretched के रूप मे Set करने के लिए उपयोग किया जाता है. |
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS3 Border Images</title>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 13px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 23px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 33px;
}
</style>
</head>
<body>
<p id="borderimg1">image boarder example</p>
<p id="borderimg2">image boarder example</p>
<p id="borderimg3">image boarder example</p>
</body>
</html>