HTML DOM borderRadius प्रॉपर्टी का उपयोग किसी तत्व के चारों ओर गोल कोने (rounded corners) जोड़ने के लिए किया जाता है। इस प्रॉपर्टी का उपयोग करके, हम borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius जैसे बॉर्डर रेडियस प्रॉपर्टी को सेट और प्राप्त कर सकते हैं।
सिंटैक्स निम्नलिखित है:
borderRadius प्रॉपर्टी सेट करना:
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
प्रॉपर्टी मान निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| length | बॉर्डर के आकार को परिभाषित करने के लिए। |
| % | प्रतिशत में बॉर्डर के आकार को परिभाषित करने के लिए। |
| initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए borderRadius प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #DIV1{ height: 100px; width: 200px; border: 10px groove orange; padding: 10px; border-radius: 1px 1px 1px 1px; } </style> <script> function changeBorderRadius(){ document.getElementById("DIV1").style.borderRadius="45px 45px 45px 45px"; document.getElementById("Sample").innerHTML="उपरोक्त div के चारों बॉर्डर का बॉर्डर रेडियस अब बढ़ गया है"; } </script> </head> <body> <div id="DIV1">SOME SAMPLE TEXT</div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div के बॉर्डर रेडियस आकार को बढ़ाएं</p> <button onclick="changeBorderRadius()">बॉर्डर रेडियस बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
बॉर्डर रेडियस बदलें बटन पर क्लिक करने पर:
