HTML DOM बॉर्डररेडियस गुण का उपयोग तत्व के चारों ओर गोल कोनों को जोड़ने के लिए किया जाता है। इस संपत्ति का उपयोग करके, हम सीमा त्रिज्या गुण जैसे BorderTopLeftRadius, BorderTopRightRadius, BorderBottomRightRadius, BorderBottomLeftRadius सेट और प्राप्त कर सकते हैं।
−
. के लिए वाक्य रचना निम्नलिखित हैBorderRadius प्रॉपर्टी सेट करना:
object.style.borderRadius = "1-4 length|% / 1-4 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="The border radius for the four borders of the above div are now increased";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Increase the above div border radius size by clicking the below button</p>
<button onclick="changeBorderRadius()">Change Border Radius</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
"बॉर्डर रेडियस बदलें" बटन पर क्लिक करने पर -
