borderColor प्रॉपर्टी का उपयोग किसी तत्व के बॉर्डर रंग को सेट या प्राप्त करने के लिए किया जाता है। borderColor प्रॉपर्टी का उपयोग करके हम बॉर्डर के प्रत्येक तरफ के रंगों में हेरफेर कर सकते हैं यानी प्रत्येक तरफ का बॉर्डर अलग रंग का हो सकता है।
सिंटैक्स
borderColor प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.borderColor = "color|transparent|initial|inherit"
मान
प्रॉपर्टी मानों को निम्नानुसार समझाया गया है:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | Color बॉर्डर रंग निर्दिष्ट करने के लिए। |
| 2 | Transparent यह बॉर्डर रंग को पारदर्शी बनाता है और इसके नीचे की सामग्री देखी जा सकती है। |
| 3 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 4 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
borderColor प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #DIV1{ width:100px; height:100px; border:solid 10px ; border-color: limegreen crimson; top: 10px; } </style> <script> function changeBorderColor(){ document.getElementById("DIV1").style.borderColor="crimson limegreen"; document.getElementById("Sample").innerHTML="The border colors are now reversed "; } </script> </head> <body> <div id="DIV1"></div> <p>Reverse the above div border colors by clicking the below button</p> <button onclick="changeBorderColor()">Change Border Color</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
COLLAPSE BORDER बटन पर क्लिक करने पर:
