border-width ගුණය

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

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

වාක්‍ය රචනය

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

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

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

සංඛ්‍යාව	විස්තරය
`1`	සියලු පැතිවලට එකවර එකම අගය.
`2`	පළමු අගය ඉහළට සහ පහළට, දෙවනුව - වම් සහ දකුණු මායිම් සඳහා.
`3`	පළමු අගය ඉහළට, දෙවනුව - වම් සහ දකුණු මායිම් සඳහා, තෙවනුව - පහළට.
`4`	පළමු අගය ඉහළ මායිම සඳහා, දෙවනුව - දකුණු, තෙවනුව - පහළ, හතරවනුව - වම් මායිම සඳහා.

උදාහරණය

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

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

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

උදාහරණය

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

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

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

උදාහරණය

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

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

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

උදාහරණය

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

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

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

උදාහරණය

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

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

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

උදාහරණය

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

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

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

උදාහරණය

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

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

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

උදාහරණය

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

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

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

මෙයද බලන්න

border-style ගුණය,
මායිමේ පෙනුම සකසයි
border-color ගුණය,
මායිමේ වර්ණය සකසයි
border ගුණය,
මායිම සඳහා කෙටි යෙදුමකි