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

cssselektor {
  border-color: rang;
}

Qiymatlar soni

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

Misol

Keling, blok chegarasini qizil rangga bo'yaymiz:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Shuningdek qarang