কোন এইচটিএমএল এলিমেন্টের বর্ডার এর স্টাইল, রঙ ইত্যাদি নির্ধারণ করতে সিএসএস এর berder প্রপার্টি ব্যাবহৃত হয়।
এটি একটি সিএসএস বর্ডার।
যে সকল প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট এর স্টাইল করা যায় সেগুলো হল - border-width, border-style ও border-color.
সকল প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
div { border-width: 5px; border-style: solid; border-color: blue; }
সিএসএস এর border-width প্রোপার্টি ব্যবহার করে কোন এলিমেন্ট এর চারপাশে বর্ডার এর প্রস্থ বা width নির্ধারণ করা হয়। এই প্রোপার্টির মান বা value নির্ধারণ করা যায় px, em, cm, % ইত্যাদি একক বা unit ব্যবহার করে।
ভিভিন্ন রকম মান ব্যবহার করে, border-width প্রোপার্টির একটি উদাহরন নিচে দেখুন।
div.px { border-width: 5px;border-style: solid;border-color: blue; } div.cm { border-width: 1.5cm;border-style: solid;border-color: blue; } div.em { border-width: 1.5em;border-style: solid;border-color: blue; }
সিএসএস এর border-style প্রোপার্টি ব্যবহার করে কোন এলিমেন্ট এর চারপাশের বর্ডার এর প্রকার বা style নির্ধারণ করা হয়। এই প্রোপার্টির মান বা value ৯ প্রকার হতে পারে, যেমন - solid, dotted, double ইত্যাদি।
বিভিন্ন রকম মান ব্যবহার করে, border-style প্রোপার্টির একটি উদাহরন নিচে দেখুন।
div.px { border-width: 5px;border-style: solid;border-color: blue; } div.cm { border-width: 1.5cm;border-style: dotted;border-color: blue; } div.em { border-width: 1.5em;border-style: double;border-color: blue; }
কোন প্রকার স্টাইলের বর্ডার, এলিমেনটের সাথে প্রদর্শিত হবে তা নির্ধারণ করা হয় berder প্রপার্টির মাধ্যমে। berder প্রপার্টিতে যে সকল মান বা value ব্যবহার করা যায়, এগুলো হল - dotted, dashed, solid, double, groove, ridge, ridge, inset ও outset.
নিচে এই মান গুলোর ব্যাবহারিক উদাহরণ দেখুন।
solid: একটি solid বর্ডার নির্ধারণ করবে।
dotted: একটি dotted বর্ডার নির্ধারণ করবে।
dashed: একটি dashed বর্ডার নির্ধারণ করবে।
double: ২ টি বর্ডার নির্ধারণ করবে।
groove: একটি 3D grooved border বর্ডার নির্ধারণ করবে।
ridge: একটি 3D ridged border বর্ডার নির্ধারণ করবে।
inset: একটি 3D inset border বর্ডার নির্ধারণ করবে।
outset: একটি 3D outset border বর্ডার নির্ধারণ করবে।
কিন্তু যদি কোন বর্ডার প্রয়োজন না হয় তবে বর্ডার স্টাইল হবে none, তবে যদি কোন বর্ডার স্টাইলই উল্লেখ করা না হয় তাহলে কোন বর্ডারই প্রদর্শিত হবে না অর্থাৎ এটা difolt মান.
সিএসএস এর border-color প্রোপার্টি ব্যবহার করে বর্ডার এর রঙ নির্ধারণ করা যায়। সিএসএস সমর্থিত সকল পদ্ধতি ব্যবহার করে, border-color প্রোপার্টির মান নির্ধারণ করা যায়।
বিভিন্ন রকম মান ব্যবহার করে, নিচে border-color প্রোপার্টির একটি উদাহরন দেখুন।
div.name { border-color: blue; } div.hex { border-color: #0000ff; } div.rgb { border-color: rgb(0, 0, 255); }
সিএসএস সমর্থিত রঙ এর ব্যবহার পদ্ধতি গুলো সম্পর্কে জানতে আমাদের সিএসএস - রঙ টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।
সিএসএস এর বর্ডার প্রোপার্টি অর্থাৎ border-width,border-style ও border-color এই প্রোপার্টি গুলোর শর্টহ্যান্ড প্রোপার্টি হল border.
সিএসএস border প্রোপার্টির সিনট্যাক্স নিচে দেখুন।
silector {border: width style color;}
এক্ষেত্রে প্রথম মানটি বর্ডার এর প্রস্থ বা width, দ্বিতীয়টি স্টাইল এবং তৃতীয়টি বর্ডার এর রঙ নির্ধারণ করে।
নিচে একটি উদাহারন দেখুন, যেখানে border প্রোপার্টি ব্যবহার করা হয়েছে।
div { border: 5px dotted red; }
শর্টহ্যান্ড প্রোপার্টিকে আরও সুক্ষ ভাবে ব্যবহার করার জন্য নিচের প্রোপার্টি গুলো ব্যবহার করা যায় -
border-left
border-right
border-top
border-bottom
নিচে একটি উদাহরন দেখুন, যেখানে একটি এলিমেনটের চারপাশে ৪ প্রকার বর্ডার নির্ধারণ করা হয়েছে।
div { border-left: 5px soltd red; border-right: 6px dotted blue; border-top: 7px dashed green; border-bottom: 8px groove yellow; }
border-style প্রোপার্টিকেও শর্টহ্যান্ড হিসেবে ব্যবহার করা যায়। নিচে একটি উদাহরন দেখুন, যেখানে একটি এলিমেন্টের চারপাশে ৪ প্রকার বর্ডার নির্ধারণ করা হয়েছে।
div { border-style: dotted dashed double solid; }
প্রোপার্টি | মান | বর্ণনা |
---|---|---|
border | ||
border-width | ||
border-style | ||
border-color | ||
border-bottom | ||
border-bottom-color | ||
border-bottom-style | ||
border-bottom-width | ||
border-top | ||
border-top-color | ||
border-top-style | ||
border-top-width | ||
border-left | ||
border-left-color | ||
border-left-style | ||
border-left-width | ||
border-right | ||
border-right-color | ||
border-right-style | ||
border-right-width |