সিএসএস৩ গোলাকার কর্নার - Css3 Rounded Corners


সিএসএস 3.0 এর border-radius প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের কোন গুলোকে গোলাকার বা বৃত্তাকার করা যায়।

নিচে সিএসএস এর 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-radius - 4টি মান

border-radiu প্রোপার্টি তে 4 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের বাঁ পাশের কোন বা corner, দ্বিতীয় মানটি ওপর দিকের ডান পাসের কোন বা corner, তৃতীয়টি নিচের দিকের ডান পাশের কোন বা corner এবং চতুর্থটি নিচ দিকের বাঁ পাসের কোন বা corner নির্ধারণ করে।

সিএসএস এর border-radius শর্টহ্যান্ড প্রোপার্টিতে 4 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

h1{
   border-radius: 20px 40px 60px 80px;
   }

কোড এডিটর



border-radius - 3টি মান

border-radius শর্টহ্যান্ড প্রোপার্টি তে 3 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি ওপর দিকের বাঁ পাশের কোন বা corner, দ্বিতীয় মানটি ওপর দিকের ডান পাস ও নিচ দিকের বাঁ পাসের কোন বা corner এবং তৃতীয় মানটি নিচের দিকের ডান পাশের কোন বা corner নির্ধারণ করে।

সিএসএস এর border-radius শর্টহ্যান্ড প্রোপার্টিতে 3 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

h1{
   border-radius: 40px 60px 80px;
   }

কোড এডিটর



border-radius - 2টি মান

border-radius প্রোপার্টি তে 2 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি ওপর দিকের বাঁ পাশ ও নিচ দিকের ডান পাঁশের কোন বা corner এবং দ্বিতীয় মানটি ওপর দিকের ডান পাস ও নিচ দিকের বাঁ পাসের কোন বা corner নির্ধারণ করে।

সিএসএস এর border-radius শর্টহ্যান্ড প্রোপার্টিতে 2 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

h1{
   border-radius: 40px 60px;
   }

কোড এডিটর



border-radius - 1টি মান

border-radius প্রোপার্টি তে 1 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে মানটি এইচটিএমএল এলিমেন্ট এর চতুর্দিকের কোন বা corner নির্ধারণ করে।

সিএসএস এর border-radius শর্টহ্যান্ড প্রোপার্টিতে 1 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

h1{
   border-radius: 60px;
   }

কোড এডিটর



ছবিতে border-radius ব্যবহার

কোন ছবিতে অর্থাৎ এইচটিএমএল এর image এলিমেন্টে border-radius প্রোপার্টি ব্যবহার করে ছবির কোন বা corner গুলো গোলাকার করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

Example of css border-radius

নিচে 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-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius