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

Результат:

Ошондой эле караңыз