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 ගුණය,
එය දාරය සඳහා කෙටි යෙදුම් ගුණයකි