সিএসএস বর্ডার
সিএসএস border প্রোপার্টি
সিএসএস border প্রোপার্টি ব্যবহার করে আপনি একটি এলিমেন্টের বর্ডারের স্টাইল, কালার এবং প্রস্থ পরিবর্তন করতে পারেন।
আপনার বুঝার স্বার্থে নিচে কিছু বর্ডারের ব্যবহার দেখানো হলোঃ
এই এলিমেন্টের চারপাশেই বর্ডার ব্যবহার করা হয়েছে।
এই এলিমেন্টের উপরে সবুজ কালারের বর্ডার ব্যবহার করা হয়েছে।
এই এলিমেন্টের চার পাশেই গোলাকার(round) বর্ডার ব্যবহার করা হয়েছে।
এক নজরে সিএসএস বর্ডার প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে নিচের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
চারপাশের বর্ডারের কর্ণারগুলোকে রাউন্ড করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে ডান পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
ডান পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
ডান পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
ডান পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডার(Border) স্টাইল
বিভিন্ন ধরনের বর্ডার তৈরির জন্য সিএসএস border-style প্রোপার্টিটি ব্যবহার করা হয়।
নিম্নে border-style প্রোপার্টির জন্য ব্যবহৃত ভ্যালুগুলো দেওয়া হলোঃ
solid- এটি solid বর্ডার ডিফাইন করেdouble- এটি double বর্ডার ডিফাইন করেdotted- এটি dotted বর্ডার ডিফাইন করেdashed- এটি dashed বর্ডার ডিফাইন করেinset- এটি 3D inset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেoutset- এটি 3D outset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেgroove- এটি 3D grooved বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেridge- এটি 3D ridge বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেhidden- এটি বর্ডারকে হিডেন করেnone- কোন বর্ডার ডিফাইন করে না
border-style প্রোপার্টিতে এক থেকে চারটি পর্যন্ত ভ্যালু থাকতে পারে। এটি ক্রমানুসারে উপরের বর্ডার থেকে শুরু করে ডানপাশে, নিচে এবং বামপাশে গিয়ে শেষ হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>border-style প্রোপার্টি</h2>
<p style="border-style: dotted;">একটি dotted বর্ডার।</p>
<p style="border-style: dashed;">একটি dashed বর্ডার।</p>
<p style="border-style: solid;">একটি solid বর্ডার।</p>
<p style="border-style: double;">একটি double বর্ডার।</p>
<p style="border-style: groove;">একটি grooved বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
<p style="border-style: ridge;">একটি ridge বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
<p style="border-style: inset;">একটি inset বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
<p style="border-style: outset;">একটি outset বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
<p style="border-style: none;">এখানে কোন বর্ডার ব্যবহার করা হয় নাই।</p>
<p style="border-style: hidden;">এটি একটি হিডেন বর্ডার।</p>
<p style="border-style: dotted dashed solid double;">বিভিন্ন ভ্যালু দ্বারা মিশ্রিত একটি বর্ডার।</p>
</body>
</html>
ফলাফল
বিঃদ্রঃ border-style প্রোপার্টির ভ্যালু সেট করা না হলে বর্ডার সংক্রান্ত অন্যান্য প্রোপার্টিগুলো কাজ করবে না।
border-width
একটি এলিমেন্টের চারিদিকের বর্ডারের প্রস্থ সেট করার জন্য border-width প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএসে প্রস্থ নির্ধারণের বিভিন্ন একক যেমনঃ px, pt, cm, em ইত্যাদি ব্যবহার করে বর্ডারের প্রস্থ সেট করা হয় অথবা পূর্ব নির্ধারিত ভ্যালু যেমন thin, medium এবং thick ইত্যাদি ব্যবহার করেও বর্ডারের প্রস্থ সেট করা যায়।
border-width প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলোঃ top border, right border, bottom border এবং left border
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.text1 {
border-style: solid;
border-width: 5px;
}
p.text2 {
border-style: solid;
border-width: medium;
}
p.text3 {
border-style: dotted;
border-width: 2px;
}
p.text4 {
border-style: dotted;
border-width: thick;
}
p.text5 {
border-style: double;
border-width: 15px;
}
p.text6 {
border-style: double;
border-width: thick;
}
p.text7 {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>border-width প্রোপার্টি</h2>
<p class="text1">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text2">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text3">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text4">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text5">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text6">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text7">বর্ডার width প্রোপার্টির ব্যবহার</p>
</body>
</html>
বিঃদ্রঃ border-width প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।
ফলাফল
border-color
বর্ডারের কালার সেট করার জন্য border-color প্রোপার্টিটি ব্যবহার করা হয়।
নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ
- Name - কালারের নাম ব্যবহার করে, যেমন
"red" - Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন
"#ff0000" - RGB - RGB ভ্যালু ব্যবহার করে, যেমন
"rgb(255,0,0)" অথবা
- transparent ব্যবহার করে।
border-color প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলো: (top border, right border, bottom border, এবং left border)
border-color নির্ধারণ করা না হলে ইহা উত্তরাধিকার সূত্রে এলিমেন্টকে কালার করে ফেলে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.text1 {
border-style: solid;
border-color: black;
}
p.text2 {
border-style: solid;
border-color: teal;
}
p.text3 {
border-style: solid;
border-color: green black blue yellow;
}
</style>
</head>
<body>
<h2>border-color property</h2>
<p class="text1">solid red border</p>
<p class="text2">solid green border</p>
<p class="text3">solid multicolor border</p>
</body>
</html>
বিঃদ্রঃ border-color প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।
ফলাফল
প্রত্যেক পাশে পৃথকভাবে বর্ডারের ব্যবহার
আপনি নিশ্চয় আগের উদাহরণেই জানতে পেরেছেন যে একটি এলিমেন্টের চারপাশে পৃথকভাবে বর্ডার সেট করা যায়।
পৃথকভাবে বর্ডার সেট করার প্রত্যেক পাশের বর্ডারের জন্য আলাদাভাবে সিএসএস প্রোপার্টি ডিক্লেয়ার করতে হয়। (যেমন- top, right, bottom, left)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
padding: 8px;
}
</style>
</head>
<body>
<p>চারদিকের বর্ডারের স্টাইল দেওয়ার জন্য চারটি প্রোপার্টি ব্যবহার করা হয়েছে।</p>
</body>
</html>
ফলাফল
এই উদাহরণটিতেও উপরের উদাহরণের মতো ফলাফল দেখাবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border-style: dotted solid;
padding: 8px;
}
</style>
</head>
<body>
<p>চারপাশের বর্ডারের স্টাইল দেওয়ার একটি শর্টহ্যান্ড প্রোপার্টি ব্যবহার করা হয়েছে।</p>
</body>
</html>
ফলাফল
উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি border-style প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
-
যেমন-
- উপরের বর্ডারটি
dotস্টাইলের হবে। - ডানের বর্ডারটি
solidস্টাইলের হবে। - নিচের বর্ডারটি
doubleস্টাইলের হবে। - বামের বর্ডারটি
dashedস্টাইলের হবে।
border-style: dotted solid double dashed;
যদি border-style প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
-
যেমন-
- উপরের বর্ডারটি
dotস্টাইলের হবে। - ডানের এবং বামের বর্ডার দুটি
solidস্টাইলের হবে। - নিচের বর্ডারটি
doubleস্টাইলের হবে।
border-style: dotted solid double;
যদি border-style প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
-
যেমন-
- উপরের এবং নিচের বর্ডার দুটি
dottedস্টাইলের হবে। - ডানের এবং বামের বর্ডার দুটি
solidস্টাইলের হবে।
border-style: dotted solid;
যদি border-style প্রোপার্টিতে একটি ভ্যালু থাকেঃ
-
যেমন-
- চারপাশের বর্ডারই
dotস্টাইলের হবে।
-style: dotted;\
উপরের উদাহরণে border-style প্রোপার্টি ব্যাবহার দেখানো হয়েছে। যাইহোক, border-style প্রোপার্টির মতোই border-width এবং border-color প্রোপার্টির ক্ষেত্রেও একই নিয়ম প্রযোজ্য।
border - শর্টহ্যান্ড প্রোপার্টি
আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, বর্ডার এর কিছু উপ-বর্ডার প্রোপার্টি রয়েছে এবং এসকল ক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।
তাই কোড সংক্ষিপ্ত করার জন্য, একটি বর্ডার প্রোপার্টির মধ্যে সবগুলো বর্ডার প্রোপার্টি ব্যবহার করা যায়।
নিচের উপ-বর্ডার প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো border:
border-widthborder-style(আবশ্যক)border-color
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border: 5px solid teal;
padding: 8px;
}
</style>
</head>
<body>
<h2>border প্রোপার্টি</h2>
<p>এটি বর্ডারের প্রস্থ(border-width), বর্ডারের স্টাইল(border-style) এবং বর্ডারের
কালার(border-color) একত্রে ব্যবহার করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>
</body>
</html>
ফলাফল
এছাড়াও আপনি আলাদা আলাদা বর্ডার প্রোপার্টিসমূহকে একটি এলিমেন্টের এক পাশের বর্ডারকে স্টাইল করার জন্য ব্যবহার করতে পারেনঃ
উদাহরণঃ border-left
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border-left: 6px solid #0099aa;
background-color: lightgrey;
padding: 5px;
}
</style>
</head>
<body>
<h2>border-left প্রোপার্টি</h2>
<p>এটি বাম পাশের বর্ডারের প্রস্থ, স্টাইল এবং কালার নির্দিষ্ট করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>
</body>
</html>
ফলাফল
উদাহরণঃ border-bottom
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border-bottom: 6px solid #0099aa;
background-color: lightgrey;
padding:5px;
}
</style>
</head>
<body>
<h2>border-bottom প্রোপার্টি</h2>
<p>এটি নিচের পাশের বর্ডারের প্রস্থ, স্টাইল এবং কালার নির্দিষ্ট করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>
</body>
</html>
ফলাফল
রাউন্ডেড বর্ডার
একটি এলিমেন্ট এর চতুর্দিকের বর্ডারকে রাউন্ড করার জন্য border-radius প্রোপার্টিটি ব্যাবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.simple {
border: 3px solid teal;
padding-left: 10px;
}
p.round_border1 {
border: 3px solid teal;
border-radius: 5px;
padding-left: 10px;
}
p.round_border2 {
border: 3px solid teal;
border-radius: 10px;
padding-left: 10px;
}
p.round_border3 {
border: 3px solid teal;
border-radius: 15px;
padding-left: 10px;
}
</style>
</head>
<body>
<h2>border-radius প্রোপার্টি</h2>
<p class="simple">সাধারন বর্ডার(Normal border)</p>
<p class="round_border1">গোল বর্ডার (Round border)</p>
<p class="round_border2">গোলাকার বর্ডার(Rounder border)</p>
<p class="round_border3">Roundest border(গোলাকৃতি বর্ডার)</p>
</body>
</html>
ফলাফল
বিঃদ্রঃ border-radius প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ অথবা তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।