borderImage प्रॉपर्टी का उपयोग किसी तत्व की बॉर्डर इमेज को सेट या प्राप्त करने के लिए किया जाता है। यह एक शॉर्टहैंड प्रॉपर्टी है, ताकि हम borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset और borderImageRepeat प्रॉपर्टीज को एक साथ मैनिपुलेट कर सकें।
सिंटैक्स
borderImage प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.borderImage = "source slice width outset repeat|initial|inherit"
मान
प्रॉपर्टी मानों को निम्नानुसार समझाया गया है:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | borderImageSource यह बॉर्डर के रूप में उपयोग की जाने वाली छवि का पथ निर्दिष्ट करता है। |
| 2 | borderImageSlice यह इमेज-बॉर्डर के आवक ऑफसेट निर्दिष्ट करता है। |
| 3 | borderImageWidth यह इमेज-बॉर्डर की चौड़ाई निर्दिष्ट करता है। |
| 4 | borderImageOutset यह बॉर्डर बॉक्स से परे बॉर्डर इमेज क्षेत्र की मात्रा निर्दिष्ट करता है। |
| 5 | borderImageRepeat यह निर्दिष्ट करता है कि इमेज-बॉर्डर को गोल किया जाना चाहिए, दोहराया जाना चाहिए या फैलाया जाना चाहिए। |
| 6 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 7 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
borderImage प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #PARA1 { border: 15px solid transparent; padding: 12px; border-image: url("https://www.tutorialspoint.com/images/blockchain.png") 20 stretch; width: 100px; } </style> <script> function changeBorderImage(){ document.getElementById("PARA1").style.borderImage="url('https://www.tutorialspoint.com/im ages/mongodb.png') 20 round"; document.getElementById("Sample").innerHTML="The border image is now changed"; } </script> </head> <body> <h2>Learning is fun</h2> <p id="PARA1">This is a sample paragraph. Here is another line</p> <p>Change the above paragraph border image by clicking the below button</p> <button onclick="changeBorderImage()">Change Border Image</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
COLLAPSE BORDER बटन पर क्लिक करने पर:
