border-width ගුණය

border-width ගුණය සියලු පැතිවලට එකවර හෝ එක් එක් පැත්තට වෙන වෙනම මායිමේ ඝනකම සකසයි. එය border-left-width, border-right-width, border-top-width, border-bottom-width ගුණ සඳහා කෙටි යෙදුමකි.

ගුණයේ අගය ලෙස ප්‍රමාණ සඳහා ඒකක (සියයට අගයන් හැර), හෝ මූල පද thin (2 පික්සල් මායිම), medium (4 පික්සල් මායිම) හෝ thick (6 පික්සල් මායිම) භාවිතා කළ හැකිය. පෙරනිමි අගය: medium.

වාක්‍ය රචනය

cssතෝරන්නා {
  border-width: 1, 2, 3 හෝ 4 අගයන්;
}

අගයන්ගේ සංඛ්‍යාව

ගුණයට හිස්තැන් වලින් වෙන් කරන ලද 1, 2, 3 හෝ 4 අගයන් ලබා දිය හැකිය:

උදාහරණය

එක් පික්සලයක ඝනකමකින් යුත් මායිමක් සකසමු:

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

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

Результат:

උදාහරණය

4 පික්සල ඝනකමකින් යුත් මායිමක් සකසමු:

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

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

Результат:

උදාහරණය

ඉහළ සහ පහළ මායිමේ ඝනකම 1px වන අතර දකුණු සහ වම් - 4px වන පරිදි සකසමු:

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

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

Результат:

උදාහරණය

ඉහළ මායිමේ ඝනකම 1px වන අතර, දකුණු සහ වම් - 4px වන අතර පහළ මායිම 6px වන පරිදි සකසමු:

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

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

Результат:

උදාහරණය

ඉහළ මායිමේ ඝනකම 1px වන අතර, දකුණු 4px වන අතර, පහළ - 6px වන අතර, වම් 8px වන පරිදි සකසමු:

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

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

Результат:

උදාහරණය

මූල පදය thin භාවිතා කර මායිමේ ඝනකම සකසමු:

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

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

Результат:

උදාහරණය

මූල පදය medium භාවිතා කර මායිමේ ඝනකම සකසමු:

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

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

Результат:

උදාහරණය

මූල පදය thick භාවිතා කර මායිමේ ඝනකම සකසමු:

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

css#elem {
  border-width: thick;
  border-style: solid;
  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;
}

Результат:

මෙයද බලන්න