বৈশিষ্ট্য border-style

বৈশিষ্ট্য border-style একই সাথে বা আলাদাভাবে প্রতিটি পাশের জন্য সীমানার শৈলী নির্ধারণ করে। এটি নিম্নলিখিত বৈশিষ্ট্যগুলির জন্য একটি সংক্ষিপ্ত রূপ বৈশিষ্ট্য: border-left-style, border-right-style, border-top-style, border-bottom-style.

সিনট্যাক্স

সিলেক্টর {
	border-style: মান;
}

মানসমূহ

মান	বর্ণনা
`solid`	একটি অবিচ্ছিন্ন রেখা।
`dotted`	বিন্দু আকারে সীমানা।
`dashed`	ড্যাশ আকারে সীমানা।
`ridge`	উত্তল রেখা আকারে সীমানা।
`double`	দ্বি-রেখা আকারে সীমানা। প্রভাব দেখতে হলে সীমানার বেধ কমপক্ষে `3px` হতে হবে।
`groove`	অবতল সীমানা।
`inset`	ধাক্কা পড়া সীমানা।
`outset`	উত্তল সীমানা।
`none`	সীমানা অনুপস্থিত।

ডিফল্ট মান: none.

মানের সংখ্যা

বৈশিষ্ট্যটি 1, 2, 3 বা 4 মান নিতে পারে, যা স্পেস দ্বারা পৃথক করা হয়:

সংখ্যা	বর্ণনা
`1`	সব পাশের জন্য একই সাথে টাইপ।
`2`	প্রথম মান উপরি এবং নিচের জন্য, দ্বিতীয় - বাম এবং ডান সীমানার জন্য।
`3`	প্রথম মান উপরের জন্য, দ্বিতীয় - বাম এবং ডান সীমানার জন্য, তৃতীয় - নিচের জন্য।
`4`	প্রথম মান উপরের সীমানার জন্য, দ্বিতীয় - ডানের জন্য, তৃতীয় - নিচের জন্য, চতুর্থ - বাম সীমানার জন্য।

উদাহরণ . solid মান

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ . dotted মান

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ . dashed মান

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ . ridge মান

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ . double মান

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ . groove মান

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ . inset মান

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ . outset মান

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ

এই উদাহরণে উপাদানগুলির বিভিন্ন পাশের জন্য বিভিন্ন ধরনের সীমানা নির্ধারণ করা হয়েছে:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

উদাহরণ

এবং এখন বিভিন্ন পাশের উপাদানের জন্য বিভিন্ন বেধের সীমানা এবং এর রঙও নির্ধারণ করা হয়েছে:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

উদাহরণ

এখন উপরি এবং নিচের সীমানার জন্য solid টাইপ নির্ধারণ করা হয়েছে, এবং ডান ও বামের জন্য - dotted:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

আরও দেখুন

বৈশিষ্ট্য border-color,
যা সীমানার রঙ নির্ধারণ করে
বৈশিষ্ট্য border-width,
যা সীমানার বেধ নির্ধারণ করে
বৈশিষ্ট্য border,
যা সীমানার জন্য একটি সংক্ষিপ্ত রূপ বৈশিষ্ট্য