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;
}

Мисол

Бир вақтда чекканинг турли қалинлик, тур ва рангini белгилаймиз:

<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 хусусияти,
чекка учун қисқартирилган хусусиятдир