HTML DOM borderRadius প্রপার্টি একটি এলিমেন্টের চারপাশের কোণগুলো বক্রাকার করতে ব্যবহৃত হয়। এই প্রপার্টি ব্যবহার করে borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius সেট বা পাওয়া যায়।
সিনট্যাক্স
borderRadius প্রপার্টি সেট করার সিনট্যাক্স:
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| length | বর্ডারের আকার নির্ধারণের জন্য। |
| % | শতাংশে বর্ডারের আকার নির্ধারণের জন্য। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!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>
আউটপুট
বর্ডার রেডিয়াস পরিবর্তন করুন বাটনে ক্লিক করলে:
