borderBottomStyle प्रॉपर्टी का उपयोग किसी तत्व के निचले बॉर्डर के लिए लाइन स्टाइल सेट या प्राप्त करने के लिए किया जाता है।
सिंटैक्स
borderBottomStyle प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.borderBottomStyle = value
मान
प्रॉपर्टी मानों को निम्नानुसार समझाया गया है:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | none यह डिफ़ॉल्ट मान है और कोई बॉर्डर परिभाषित नहीं करता। |
| 2 | hidden यह "none" के समान है लेकिन फिर भी बॉर्डर स्पेस लेगा। यह मूल रूप से पारदर्शी है लेकिन फिर भी मौजूद है। |
| 3 | dotted यह एक डॉटेड बॉर्डर परिभाषित करता है। |
| 4 | dashed यह एक डैश्ड बॉर्डर परिभाषित करता है। |
| 5 | solid यह एक सॉलिड बॉर्डर परिभाषित करता है। |
| 6 | double यह एक डबल बॉर्डर परिभाषित करता है। |
| 7 | groove यह एक 3D ग्रूव बॉर्डर परिभाषित करता है और ridge का विपरीत है। |
| 8 | ridge यह एक 3D रिज्ड बॉर्डर परिभाषित करता है और groove का विपरीत है। |
| 9 | inset यह एक 3D इनसेट बॉर्डर परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह एम्बेडेड है। यह outset के विपरीत प्रभाव पैदा करता है। |
| 10 | outset यह एक 3D इनसेट बॉर्डर परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह एम्बॉस्ड है। यह inset के विपरीत प्रभाव पैदा करता है। |
| 11 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 12 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
borderBottomStyle प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #DIV1{ width:300px; height:100px; border-bottom: 8px solid dodgerblue; border-bottom-style: groove; } </style> <script> function changeBottomStyle(){ document.getElementById("DIV1").style.borderBottomStyle="dashed"; document.getElementById("Sample").innerHTML="The bottom border style is now changed"; } </script> </head> <body> <div id="DIV1">SOME SAMPLE TEXT</div> <p>Change the div bottom border style size by clicking the below button</p> <button onclick="changeBottomStyle()">Change Bottom Style</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
"Change Bottom Style" बटन पर क्लिक करने पर:
