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


কোন এইচটিএমএল এলিমেন্টের বর্ডার এর স্টাইল, রঙ ইত্যাদি নির্ধারণ করতে সিএসএস এর berder প্রপার্টি ব্যাবহৃত হয়।

এটি একটি সিএসএস বর্ডার।



সকল বর্ডার প্রোপার্টি

যে সকল প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট এর স্টাইল করা যায় সেগুলো হল - border-width, border-styleborder-color.

সকল প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
    border-width: 5px;
    border-style: solid;
    border-color: blue;
    }

কোড এডিটর



border-width প্রোপার্টি

সিএসএস এর 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 প্রোপার্টি

সিএসএস এর 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-style প্রোপার্টির মান

কোন প্রকার স্টাইলের বর্ডার, এলিমেনটের সাথে প্রদর্শিত হবে তা নির্ধারণ করা হয় berder প্রপার্টির মাধ্যমে। berder প্রপার্টিতে যে সকল মান বা value ব্যবহার করা যায়, এগুলো হল - dotted, dashed, solid, double, groove, ridge, ridge, insetoutset.

নিচে এই মান গুলোর ব্যাবহারিক উদাহরণ দেখুন।

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 প্রোপার্টির মান নির্ধারণ করা যায়।

বিভিন্ন রকম মান ব্যবহার করে, নিচে border-color প্রোপার্টির একটি উদাহরন দেখুন।

উদাহরণ

div.name {
    border-color: blue;
	}
	
div.hex {
    border-color: #0000ff;
	}	
	
div.rgb {
    border-color: rgb(0, 0, 255);
	}

কোড এডিটর


সিএসএস সমর্থিত রঙ এর ব্যবহার পদ্ধতি গুলো সম্পর্কে জানতে আমাদের সিএসএস - রঙ টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।


শর্টহ্যান্ড প্রোপার্টি - border

সিএসএস এর বর্ডার প্রোপার্টি অর্থাৎ border-width,border-styleborder-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