সিএসএস border প্রোপার্টি

সিএসএস border প্রোপার্টি ব্যবহার করে আপনি একটি এলিমেন্টের বর্ডারের স্টাইল, কালার এবং প্রস্থ পরিবর্তন করতে পারেন।

আপনার বুঝার স্বার্থে নিচে কিছু বর্ডারের ব্যবহার দেখানো হলোঃ

এই এলিমেন্টের উপরে সবুজ কালারের বর্ডার ব্যবহার করা হয়েছে।

এক নজরে সিএসএস বর্ডার প্রোপার্টিসমূহ

border

একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom

একটি ডিক্লেয়ারেশনের মাধ্যমে নিচের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-color

নিচের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-style

নিচের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-width

নিচের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-color

বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-left

একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-color

বাম পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-style

বাম পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-width

বাম পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-top

একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-color

উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-style

উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-width

উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-width

বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-top

একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-color

উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-style

উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-width

উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-width

বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

বর্ডার(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-width
• border-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 প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ অথবা তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।