Хусусияти border-color

Хусусияти border-color рангро барои ҳама ҷонибҳои ҳудуд якбора ё ба таври алоҳида барои ҳар як ҷониб таъин мекунад. Қимати хусусият ҳар гуна воҳиди ранг метавонад бошад. Қимати пешфарз: ҳамон ранг, ки матни блок дорад.

Хусусият як хусусияти мухтасари барои хусусиятҳои зерин мебошад: border-left-color, border-right-color, border-top-color, border-bottom-color.

Синтаксис

cssинтихобкунанда {
  border-color: ранг;
}

Шумораи қиматҳо

Хусусият метавонад 1, 2, 3 ё 4 қиматро, ки бо фосила дода шудааст, қабул кунад:

Намуна

Биёед ҳудуди блокро ба ранги сурх рангин кунем:

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

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

Результат:

Намуна

Барои ҳудуди болоӣ ва поёнии сурх, ва барои ҳудуди рост ва чап ранги обӣ таъин кунем:

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

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

Результат:

Намуна

Барои ҳудуди болоӣ ранги сурх, барои рост ранги обӣ, барои поёнӣ ранги сабз, барои чап ранги сиёҳ таъин кунем:

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

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

Результат:

Намуна

Ҳамзамон фарқии ғафсӣ, навъ ва ранги ҳудудро таъин кунем:

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

Результат:

Намуна

Агар ранги ҳудуд дар border-color таъин нашуда бошад - он аз хусусияти color гирифта мешавад:

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

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

Результат:

Ҳамчунин нигаред