সিএসএস(৩) বৃত্তাকার কর্ণার
বৃত্তাকার ইমেজ!
সিএসএস(৩) বৃত্তাকার কর্ণার
আপনি কোনো ইমেজ বা একাধিক <div> ব্যবহার করা ছাড়াই যেকোনো এলিমেন্ট অথবা টেক্সটে বৃত্তাকার বর্ডার বা কর্ণার দিতে পারবেন। সিএসএস(৩) border-radius প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারেন।
এক নজরে বৃত্তাকার কর্ণারের সম্ভাব্য প্রোপার্টি-সমূহ
বর্ডারের সবগুলো কর্ণারের আকৃতি সেট করে।
বর্ডারের উপরের-বাম কর্ণারের আকৃতি সেট করে।
বর্ডারের উপরের-ডান কর্ণারের আকৃতি সেট করে।
বর্ডারের নিচের-ডান কর্ণারের আকৃতি সেট করে।
বর্ডারের নিচের-বাম কর্ণারের আকৃতি সেট করে।
সিএসএস(৩) border-radius প্রোপার্টি
সিএসএস(৩) border-radius প্রোপার্টি ব্যবহার করে আপনি যেকোনো এলিমেন্টের কর্ণার বৃত্তাকার করতে পারেন।
নিচের উদাহরণে তা দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস border-radius এর উদাহরণ</title>
<style>
#rounded1 {
border-radius:30px;
background:turquoise;
padding:25px;
width:200px;
height:80px;
text-align: center;
font-size: 15px;
}
#rounded2 {
border-radius: 25px;
border: 5px solid teal;
text-align: center;
font-size: 15px;
padding:25px;
width:200px;
height:80px;
}
#rounded3 {
border-radius: 25px;
background: url(../css_examples/natural.jpg);
background-position: left top;
background-repeat: repeat;
text-align: center;
font-size: 15px;
padding:25px;
width:200px;
height:80px;
}
</style>
</head>
<body>
<h2>border-radius প্রোপার্টির ব্যবহারঃ</h2>
<p id="rounded1">সুনির্দিষ্ট ব্যাকগ্রাউন্ড-কালারসহ একটি এলিমেন্টের চারদিক বৃত্তাকার!</p>
<p id="rounded2"> বর্ডারসহ একটি এলিমেন্টের চারদিক বৃত্তাকার!</p>
<p id="rounded3"> ছবিসহ একটি এলিমেন্টের চারদিক বৃত্তাকার!</p>
</body>
</html>
ফলাফল
বিঃদ্রঃ border-radius প্রোপার্টিটি আসলে
border-top-left-radius, border-top-right-radius, border-bottom-right-radius
এবং border-bottom-left-radius প্রোপার্টিসমূহ একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।
বর্ডারে প্রতিটি কর্ণারে জন্য আলাদা-আলাদা ভ্যালু
আপনি যদি border-radius প্রোপার্টিতে ১টি ভ্যালু উল্লেখ করেন তাহলে এটি ৪টি কর্ণারের জন্যই প্রযোজ্য হবে।
যাইহোক, আপনি ইচ্ছা করলে প্রত্যেক কর্ণারের জন্যই ভিন্ন ভিন্ন ভ্যালু নির্ধারণ করতে পারেন। এক্ষেত্রে আপনি একটি থেকে চারটি পর্যন্ত ভ্যালু ব্যবহার করতে পারেন। border-radius প্রোপার্টিতে ভ্যালু ব্যবহার পদ্ধতি নিম্নে তুলে ধরা হলোঃ
- চারটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান কর্ণার, তৃতীয় ভ্যালুটি নিচের-ডান কর্ণার এবং চতুর্থ ভ্যালুটি নিচের-বাম কর্ণারের জন্য প্রযোজ্য হবে।
- তিনটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান এবং নিচের-বাম কর্ণার, এবং তৃতীয় ভ্যালুটি নিচের-ডান কর্ণারের জন্য প্রযোজ্য হবে।
- দুইটি ভ্যালুঃ প্রথম ভ্যালুটি উপরের-বাম এবং নিচের-ডান কর্ণার, দ্বিতীয় ভ্যালুটি উপরের-ডান এবং নিচের-বাম কর্ণারের জন্য প্রযোজ্য হবে।
- একটি ভ্যালুঃ চারটি কর্ণারের জন্যই প্রযোজ্য হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস border-radius এর উদাহরণ</title>
<style>
#rounded1{
border-radius: 20px 60px 35px 10px;
background:lightseagreen;
padding:25px;
width:150px;
height:40px;
}
#rounded2 {
border-radius: 20px 60px 35px;
background:lightseagreen;
padding:25px;
width:150px;
height:40px;
}
#rounded3{
border-radius: 20px 60px;
background:lightseagreen;
padding:25px;
width:150px;
height:40px;
}
</style>
</head>
<body>
<p>চারটি ভ্যালু - border-radius: 20px 60px 35px 10px;</p>
<p id="rounded1">স্যাট একাডেমি</p>
<p> তিনটি ভ্যালু - border-radius: 20px 60px 35px;</p>
<p id="rounded2">স্যাট একাডেমি</p>
<p>দুইটি ভ্যালু - border-radius: 20px 60px;</p>
<p id="rounded3">স্যাট একাডেমি</p>
</body>
</html>
ফলাফল
border-radius প্রোপার্টি ব্যবহার করে আপনি উপবৃত্তাকার কর্ণারও তৈরি করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#rounded1 {
border-radius:40px/20px;
width:150px;
height:40px;
background:#8a7b4c;
padding:25px;
}
#rounded2 {
border-radius:20px/40px;
width:150px;
height:40px;
background:#83b;
padding:25px;
}
#rounded3 {
border-radius: 50%;
width:150px;
height:40px;
background:#79A;
padding:25px;
text-align:center;
}
</style>
<title>সিএসএসের উদাহরণ</title>
</head>
<body>
<p>উপবৃত্তাকার বর্ডার - border-radius: 40px/20px;</p>
<p id="rounded1">স্যাট একাডেমি</p>
<p>উপবৃত্তাকার বর্ডার - border-radius:20px/40px;</p>
<p id="rounded2">স্যাট একাডেমি</p>
<p>উপবৃত্তাকার বর্ডার - border-radius:50%;</p>
<p id="rounded3">স্যাট একাডেমি</p>
</body>
</html>
ফলাফল
ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| প্রোপার্টি | 10.5 | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |