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

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

সিনট্যাক্স

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

মানসমূহ

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

মানের সংখ্যা

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

উদাহরণ . solid মান

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

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

Результат:

উদাহরণ . dotted মান

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

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

Результат:

উদাহরণ . dashed মান

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

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

Результат:

উদাহরণ . ridge মান

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

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

Результат:

উদাহরণ . double মান

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

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

Результат:

উদাহরণ . groove মান

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

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

Результат:

উদাহরণ . inset মান

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

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

Результат:

উদাহরণ . outset মান

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

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

Результат:

উদাহরণ

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

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

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

Результат:

উদাহরণ

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

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

css#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:

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

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

Результат:

আরও দেখুন