সিএসএস border প্রোপার্টি
সিএসএস border প্রোপার্টি ব্যবহার করে আপনি একটি এলিমেন্টের বর্ডারের স্টাইল, কালার এবং প্রস্থ পরিবর্তন করতে পারেন।
আপনার বুঝার স্বার্থে নিচে কিছু বর্ডারের ব্যবহার দেখানো হলোঃ
| এই এলিমেন্টের চারপাশেই বর্ডার ব্যবহার করা হয়েছে। |
এই এলিমেন্টের উপরে সবুজ কালারের বর্ডার ব্যবহার করা হয়েছে।
| এই এলিমেন্টের চার পাশেই গোলাকার(round) বর্ডার ব্যবহার করা হয়েছে। |
এক নজরে সিএসএস বর্ডার প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে নিচের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডার(Border) স্টাইল
বিভিন্ন ধরনের বর্ডার তৈরির জন্য search সিএসএস 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 প্রোপার্টিতে এক থেকে চারটি পর্যন্ত ভ্যালু থাকতে পারে। এটি ক্রমানুসারে উপরের বর্ডার থেকে শুরু করে ডানপাশে, নিচে এবং বামপাশে গিয়ে শেষ হয়।
kt_satt_skill_example_id=373
বিঃদ্রঃ border-style প্রোপার্টির ভ্যালু সেট করা না হলে বর্ডার সংক্রান্ত অন্যান্য প্রোপার্টিগুলো কাজ করবে না।
border-width
একটি এলিমেন্টের চারিদিকের বর্ডারের প্রস্থ সেট করার জন্য border-width প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএসে প্রস্থ নির্ধারণের বিভিন্ন একক যেমনঃ px, pt, cm, em ইত্যাদি ব্যবহার করে বর্ডারের প্রস্থ সেট করা হয় অথবা পূর্ব নির্ধারিত ভ্যালু যেমন thin, medium এবং thick ইত্যাদি ব্যবহার করেও বর্ডারের প্রস্থ সেট করা যায়।
border-width প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলোঃ top border, right border, bottom border এবং left border
kt_satt_skill_example_id=377
বিঃদ্রঃ 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 নির্ধারণ করা না হলে ইহা উত্তরাধিকার সূত্রে এলিমেন্টকে কালার করে ফেলে।
kt_satt_skill_example_id=384
বিঃদ্রঃ border-color প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।
প্রত্যেক পাশে পৃথকভাবে বর্ডারের ব্যবহার
আপনি নিশ্চয় আগের উদাহরণেই জানতে পেরেছেন যে একটি এলিমেন্টের চারপাশে পৃথকভাবে বর্ডার সেট করা যায়।
পৃথকভাবে বর্ডার সেট করার প্রত্যেক পাশের বর্ডারের জন্য আলাদাভাবে search সিএসএস প্রোপার্টি ডিক্লেয়ার করতে হয়। (যেমন- top, right, bottom, left)
kt_satt_skill_example_id=385
এই উদাহরণটিতেও উপরের উদাহরণের মতো ফলাফল দেখাবেঃ
kt_satt_skill_example_id=386
উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি border-style প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
- উপরের বর্ডারটি
dotস্টাইলের হবে। - ডানের বর্ডারটি
solidস্টাইলের হবে। - নিচের বর্ডারটি
doubleস্টাইলের হবে। - বামের বর্ডারটি
dashedস্টাইলের হবে।
যদি border-style প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
- উপরের বর্ডারটি
dotস্টাইলের হবে। - ডানের এবং বামের বর্ডার দুটি
solidস্টাইলের হবে। - নিচের বর্ডারটি
doubleস্টাইলের হবে।
যদি border-style প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
- উপরের এবং নিচের বর্ডার দুটি
dottedস্টাইলের হবে। - ডানের এবং বামের বর্ডার দুটি
solidস্টাইলের হবে।
যদি border-style প্রোপার্টিতে একটি ভ্যালু থাকেঃ
- চারপাশের বর্ডারই
dotস্টাইলের হবে।
উপরের উদাহরণে border-style প্রোপার্টি ব্যাবহার দেখানো হয়েছে। যাইহোক, border-style প্রোপার্টির মতোই border-width এবং border-color প্রোপার্টির ক্ষেত্রেও একই নিয়ম প্রযোজ্য।
border - শর্টহ্যান্ড প্রোপার্টি
আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, বর্ডার এর কিছু উপ-বর্ডার প্রোপার্টি রয়েছে এবং এসকল ক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।
তাই কোড সংক্ষিপ্ত করার জন্য, একটি বর্ডার প্রোপার্টির মধ্যে সবগুলো বর্ডার প্রোপার্টি ব্যবহার করা যায়।
নিচের উপ-বর্ডার প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো border:
border-widthborder-style(আবশ্যক)border-color
kt_satt_skill_example_id=388
এছাড়াও আপনি আলাদা আলাদা বর্ডার প্রোপার্টিসমূহকে একটি এলিমেন্টের এক পাশের বর্ডারকে স্টাইল করার জন্য ব্যবহার করতে পারেনঃ
kt_satt_skill_example_id=391
kt_satt_skill_example_id=395
রাউন্ডেড বর্ডার
একটি এলিমেন্ট এর চতুর্দিকের বর্ডারকে রাউন্ড করার জন্য border-radius প্রোপার্টিটি ব্যাবহার করা হয়।
kt_satt_skill_example_id=398
বিঃদ্রঃ border-radius প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ অথবা তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।
Read more
