Border-color xususiyati

border-color xususiyati barcha chegaralar uchun bir vaqtning o'zida yoki har bir chegaraga alohida rang belgilaydi. Xususiyat qiymati istalgan rang birliklari bo'lishi mumkin. Standart qiymat: blok matnining rangi bilan bir xil.

Xususiyat quyidagi xususiyatlar uchun qisqartirilgan xususiyat hisoblanadi: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaksis

selektor {
	border-color: rang;
}

Qiymatlar soni

Xususiyat 1, 2, 3 yoki 4 ta qiymatni bo'sh joy orqali qabul qilishi mumkin:

Soni	Tavsif
`1`	Barcha chegaralar uchun bir vaqtning o'zida tur.
`2`	Birinchi qiymat yuqori va pastki chegaralar uchun, ikkinchisi - chap va o'ng chegaralar uchun.
`3`	Birinchi qiymat yuqori chegaraga, ikkinchisi - chap va o'ng chegaralarga, uchinchisi - pastki chegaraga.
`4`	Birinchi qiymat yuqori chegaraga, ikkinchisi - o'ng chegaraga, uchinchisi - pastki chegaraga, to'rtinchisi - chap chegaraga.

Misol

Keling, blok chegarasini qizil rangga bo'yaymiz:

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

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

Misol

Yuqori va pastki chegaralar uchun qizil rangni, o'ng va chap chegaralar uchun moviy rangni belgilaymiz:

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

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

Misol

Yuqori chegaraga qizil rangni, o'ng chegaraga moviy rangni, pastki chegaraga yashil rangni, chap chegaraga qora rangni belgilaymiz:

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

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

Misol

Bir vaqtning o'zida har xil qalinlik, tur va rangdagi chegarani belgilaymiz:

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

Misol

Agar chegaraning rangi border-color da belgilanmagan bo'lsa - u color xususiyatidan olinadi:

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

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

Shuningdek qarang

border-width xususiyati,
bu chegaraning qalinligini belgilaydi
border-style xususiyati,
bu chegaraning turini belgilaydi
border xususiyati,
bu chegaralar uchun qisqartirilgan xususiyat hisoblanadi