border-color ගුණාංගය

border-color ගුණාංගය එකවර සියලු පැතිවලට හෝ සෑම පැත්තකටම වෙන වෙනම මායිම් වර්ණය නියම කරයි. ගුණාංගයේ අගය වන්නේ ඕනෑම වර්ණ සඳහා ඒකක. පෙරනිමි අගය: බ්ලොක් එකේ පෙළ වර්ණයට සමාන වර්ණය.

ගුණාංගය පහත ගුණාංග සඳහා කෙටි ගුණාංගයකි: border-left-color, border-right-color, border-top-color, border-bottom-color.

වාක්‍ය රචනය

තෝරන්නා {
	border-color: වර්ණය;
}

අගයන්ගේ ප්‍රමාණය

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

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

උදාහරණය

බ්ලොක් එකේ මායිම රතු පැහැයට වර්ණ කරමු:

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

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

උදාහරණය

ඉහළ සහ පහළ පැත්ත සඳහා රතු මායිමක් නියම කරමු, දකුණු සහ වම් පැත්ත සඳහා නිල් පැහැති මායිමක්:

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

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

උදාහරණය

ඉහළ පැත්ත සඳහා රතු මායිමක්, දකුණු පැත්ත සඳහා නිල් පැහැති, පහළ පැත්ත සඳහා කොළ, වම් පැත්ත සඳහා කළු මායිමක් නියම කරමු:

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

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green 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-color හි නියම කර නොමැති නම් - එය color ගුණාංගයෙන් ගනු ලැබේ:

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

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

මෙයත් බලන්න

border-width ගුණාංගය,
මායිමේ ඝනකම නියම කරන
border-style ගුණාංගය,
මායිමේ ආකාරය නියම කරන
border ගුණාංගය,
මායිම සඳහා කෙටි ගුණාංගයක් වන