সিএসএস 3.0 এর border-radius প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের কোন গুলোকে গোলাকার বা বৃত্তাকার করা যায়।
নিচে সিএসএস এর border-radius প্রপার্টিরএকটি ব্যাবহারিক উদাহরন দেখুন।
এটি সিএসএস border-radius প্রোপার্টির উদাহরন।
সিএসএস 3.0 এর border-radius প্রোপার্টি ব্যবহার করে যেকোনো এইচটিএমএল এলিমেন্টের কোণ বা corner কে বৃত্তাকার বা গোলাকার আকৃতি প্রদান করা যায়। নিচের এর সিনট্যাক্স দেখুন
element {border-radius: value;}
নিচে border-radius প্রপার্টির ব্যবহার করে একটি উদাহরন দেখুন।
#example{ border-radius: 25px; background: #73AD21; padding: 15px; width: 300px; height: 300px; }
border-radius প্রপার্টি হল আসলে border-top-left-radius, border-top-right-radius, border-bottom-right-radius এবং border-bottom-left-radius প্রপার্টির সর্টহ্যান্ড বা সংক্ষিপ্ত রুপ।
যদি সিএসএস এর border-radius প্রোপার্টিতে ১টি মান বা value উল্লেখ করা হয় তবে এটি ৪টি কোণের জন্যই প্রযোজ্য হবে। কিন্তু প্রত্যেক কোণের জন্য ভিন্ন ভিন্ন মান নির্ধারণ করা যায়। সর্বমোট ৪টি উপায়ে border-radius এর শর্টহ্যান্ড প্রপার্টি ব্যবহার করা যায়। নীচে এ 4টি পদ্ধতির উদাহরণ দেখুন -
border-radiu প্রোপার্টি তে 4 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের বাঁ পাশের কোন বা corner, দ্বিতীয় মানটি ওপর দিকের ডান পাসের কোন বা corner, তৃতীয়টি নিচের দিকের ডান পাশের কোন বা corner এবং চতুর্থটি নিচ দিকের বাঁ পাসের কোন বা corner নির্ধারণ করে।
সিএসএস এর border-radius শর্টহ্যান্ড প্রোপার্টিতে 4 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
h1{ border-radius: 20px 40px 60px 80px; }
border-radius শর্টহ্যান্ড প্রোপার্টি তে 3 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি ওপর দিকের বাঁ পাশের কোন বা corner, দ্বিতীয় মানটি ওপর দিকের ডান পাস ও নিচ দিকের বাঁ পাসের কোন বা corner এবং তৃতীয় মানটি নিচের দিকের ডান পাশের কোন বা corner নির্ধারণ করে।
সিএসএস এর border-radius শর্টহ্যান্ড প্রোপার্টিতে 3 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
h1{ border-radius: 40px 60px 80px; }
border-radius প্রোপার্টি তে 2 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি ওপর দিকের বাঁ পাশ ও নিচ দিকের ডান পাঁশের কোন বা corner এবং দ্বিতীয় মানটি ওপর দিকের ডান পাস ও নিচ দিকের বাঁ পাসের কোন বা corner নির্ধারণ করে।
সিএসএস এর border-radius শর্টহ্যান্ড প্রোপার্টিতে 2 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
h1{ border-radius: 40px 60px; }
border-radius প্রোপার্টি তে 1 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে মানটি এইচটিএমএল এলিমেন্ট এর চতুর্দিকের কোন বা corner নির্ধারণ করে।
সিএসএস এর border-radius শর্টহ্যান্ড প্রোপার্টিতে 1 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
h1{ border-radius: 60px; }
কোন ছবিতে অর্থাৎ এইচটিএমএল এর image এলিমেন্টে border-radius প্রোপার্টি ব্যবহার করে ছবির কোন বা corner গুলো গোলাকার করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।
নিচে image এলিমেন্টে border-radius প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখুন।
img{ border-radius: 30px; }
নিচের টেবিলে দেয়া রোগুলোর প্রথম লাইন ওয়েব ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি border-radius প্রপার্টি সমর্থন বা support করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত সংস্করণ বা version গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ বা version যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।
প্রপার্টি | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
প্রোপার্টি | বর্ণনা |
---|---|
border-radius | |
border-top-left-radius | |
border-top-right-radius | |
border-bottom-right-radius | |
border-bottom-left-radius |