সিএসএস৩ border-radius প্রোপার্টি সাহায্যে আপনি যেকোন এলিমেনন্ট এর “গোলাকৃতির কোর্ণার বা পার্শ্ব” তৈরি করতে পারেন।
ব্রাউজার সাপর্ট
টেবিলে উল্লেখিত সংখ্যা ব্রাউজার এর প্রথম ভার্সন যা এই প্রোপার্টি সম্পূর্ণভাবে সাপর্ট করে তা বোঝায়।
-webkit- বা -moz- দ্বারা প্রথম প্রিফিক্স ভার্সন বুঝায় যা এই প্রোপার্টি সাপর্ট করে।
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
সিএসএস৩ border-radius প্রোপার্টি
সিএসএস৩ এ এ border-radius প্রোপার্টি এর সাহায্যে যেকোন এলিমেন্ট এর “rounded corners” প্রদান করতে পারেন।
এখানে কিছু উদাহরণ দেয়া হলো:
নির্দিষ্ট ব্যাকগ্রাউন্ড রং বিশিষ্ট একটি এলিমেন্ট এর গোলাকৃতি পার্শ্ব :
Rounded corners!
বর্ডার বিশিষ্ট একটি এলিমেন্ট এর গোলাকৃতি পার্শ্ব:
Rounded corners!
নির্দিষ্ট ব্যাকগ্রাউন্ড ছবি বিশিষ্ট একটি এলিমেন্ট এর গোলাকৃতি পার্শ্ব :
Rounded corners!
এর কোড হচ্ছে:
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
টিপস: border-radius হচ্ছে border-top-left-radius, border-top-right-radius, border-bottom-right-radius এবং border-bottom-left-radius এর সংক্ষিপ্ত প্রোপার্টি।
সিএসএস৩ border-radius প্রতিটি আলাদা পার্শ্ব পরিবর্তন
যদি আপনি border-radius প্রোপার্টি এর একটিমাত্র মান নির্ধারণ করেন তাহলে তা চারটি কর্ণারের উপরই কার্যকর হবে।
যদি আপনি চান তাহলে প্রতিটি আলাদা পার্শ্ব এর মান নির্ধারণ করে দিতে পারেন। এখানে তার নিয়ম দেয়া হলো:
- চারটি মান: প্রথম মান উপরের বাম পাশের, দ্বিতীয় মান উপরের ডান পাশের, তৃতীয় মান নিচের ডান পাশের এবং চতুর্থ মান নিচের বাম পাশের কর্ণারের উপর প্রয়োগ হয়।
- তিনটি মান: প্রথম মান উপরের বাম পাশে, দ্বিতীয় মান উপরের ডান পাশ ও নিচের বাম পাশে এবং তৃতীয় মান নিচের ডান পাশের কর্ণারের উপর কাজ করে।
- দুইটি মান: প্রথম মান উপরের বাম পাশ ও নিচের ডান পাশ এবং দ্বিতীয় মান উপরের ডান পাশ ও নিচের বাম পাশের কর্ণারের উপর কাজ করে।
- একটি মান: চারটি কর্ণরকেই সমানভাবে গোলাকৃতি করে।
এখানে তিনটি উদাহরণ দেয়া হলো:
১. চারটি মান – border-radius: 15px 50px 30px 5px:
Rounded corners!
২. তিনটি মান – border-radius: 15px 50px 30px:
Rounded corners!
৩. দুইটি মান – border-radius: 15px 50px:
Rounded corners!
এখানে এর কোড দেয়া হলো:
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
আপনি উপবৃত্তাকার কোণও তৈরি করতে পারেন:
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}