সিএসএস বর্ডার - Css Border



এলিমেনট বর্ডারের স্টাইল এবং কালার নির্দিষ্ট করতে সিএসএস বর্ডার প্রপার্টি ব্যাবহৃত হয়।


বর্ডার স্টাইল

কোন প্রকার স্টাইলের বর্ডার, এলিমেনটের সাথে প্রদর্শিত হবে তা নির্ধারণ করা হয় বর্ডার প্রপার্টির মাধ্যমে। এলিমেনটের সাথে ৯ প্রকার স্টাইল ব্যবহার করা যায়। এগুলো হল - 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 width প্রপার্টি

বর্ডারের দৈর্ঘ্য বা width নির্দিষ্ট করতে এই প্রপার্টি ব্যবহার করা হয়। width নির্ধারণ করা হয় পিক্সেল(px) এ। এছারাও পূর্ব নির্ধারিত মান হিসেবে thin, medium, thick এই ৩টি মান ব্যবহার করা যায়।

উদাহরণ

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}


নোট - যদি বর্ডার স্টাইল উল্লেখ করা না হয়, তবে বর্ডার প্রপার্টি কাজ করবে না।


border color প্রপার্টি

এলিমেনট বর্ডারের রং নির্ধারণ করতে Border Color প্রপার্টি ব্যবহার করা হয়। বর্ডারের রং নির্ধারণের উল্লেখযোগ্য পদ্ধতিগুলো হল -
১) রঙের নাম:- সরাসরি রঙের নাম উল্লেখ করে,
২) RGB মান:- RGB পদ্ধতিতে রঙের কোড উল্লেখ করে,
৩) Hex মান:- হেক্সাডেসিম্যাল পদ্ধতিতে রঙের কোড উল্লেখ করে।

কোড দেখুন

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}


নোট -শুধুমাত্র বর্ডার color প্রপার্টি উল্লেখ করা হলে তা কাজ করে না। তাই প্রথমে বর্ডার স্টাইল উল্লেখ করতে হবে।


বিভিন্ন স্টাইলের বর্ডার

সিএসএসের মাধ্যমে কোন এলিমেনটের বিভিন্ন দিকে বিভিন্ন রকম বর্ডার নির্ধারণ করা যায়।

কোড দেখুন

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}


top, bottom, left ও right এর জন্য আলাদা আলাদা ভাবে বর্ডার স্টাইল নির্ধারণ না করে একবার মাত্র বর্ডার স্টাইল প্রপার্টি ব্যবহার করেই চারদিকে চার রকম বর্ডার স্টাইল নির্ধারণ করা যায়।

কোড দেখুন

border-style:solid dotted double dashed;


এই ভাবে বর্ডার স্টাইল প্রপার্টি লেখার ফলে এলিমেনটের top এ solid, right এ dotted, bottom এ double এবং left এ dashed স্টাইলের বর্ডার তৈরি হবে।


বর্ডার শর্টহ্যান্ড প্রপার্টি

কোড সংক্ষিপ্ত করে লেখার জন্য, সবগুলো বর্ডার প্রপার্টি একটি মাত্র সিএসএস প্রপার্টির মাধ্যমে প্রকাশ করা যায়। একে বলে শর্টহ্যান্ড প্রপার্টি। নিচে শর্টহ্যান্ড প্রপার্টির কোড দেখুন -

কোড দেখুন

border:5px solid red;


শর্টহ্যান্ড বর্ডার প্রপার্টি ব্যবহার করার সময় প্রথমে width তারপর style এবং সবশেষে color উল্লেখ করতে হবে।

আবার বর্ডার শর্টহ্যান্ড প্রপার্টি ব্যবহার করে ভিন্ন ভিন্ন ভাবে চারদিকের বর্ডার নির্ধারণ করা যায়। নিচে তা দেখানো হল -

কোড দেখুন

border-top:5px solid red;
border-right:5px solid green;
border-bottom:5px solid blue;
border-left:5px solid yellow;




সিএসএসের সব বর্ডার প্রপার্টি

প্রপার্টি বর্ণনা
border একটি মাত্র ডিক্লারেসনের দ্বারা সকল বর্ডার প্রপার্টি নির্ধারণ করে।
border-bottom একটি মাত্র ডিক্লারেসনের দ্বারা border bottom প্রপার্টির মান নির্ধারণ করে।
border-bottom-color bottom border প্রপার্টির রং নির্ধারণ করে।
border-bottom-style bottom border এর স্টাইল নির্ধারণ করে।
border-bottom-width bottom border এর প্রস্থ বা width নির্ধারণ করে।
border-color একটিমাত্র ডিক্লারেসনের দ্বারা চতুর্দিকের বর্ডার প্রপার্টির রং নির্ধারণ করে।
border-left একটি মাত্র ডিক্লারেসনের দ্বারা সকল left border প্রপার্টির মান নির্ধারণ করে।
border-left-color left border প্রপার্টির রং নির্ধারণ করে।
border-left-style left border এর স্টাইল নির্ধারণ করে।
border-left-width left border এর প্রস্থ বা width নির্ধারণ করে।
border-right একটি মাত্র ডিক্লারেসনের দ্বারা সকল right border প্রপার্টির মান নির্ধারণ করে।
border-right-color right border প্রপার্টির রং নির্ধারণ করে।
border-right-style right border এর স্টাইল নির্ধারণ করে।
border-right-width right border এর প্রস্থ বা width নির্ধারণ করে।
border-style সবগুলো border এর style নির্ধারণ করে।
border-top একটি মাত্র ডিক্লারেসনের দ্বারা সকল top border এর মান নির্ধারণ করে।
border-top-color top border এর রং নির্ধারণ করে।
border-top-style top border এর স্টাইল নির্ধারণ করে।
border-top-width top border এর প্রস্থ বা width নির্ধারণ করে।
border-width চারপাশের বর্ডারের প্রস্থ বা width নির্ধারণ করে।






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.