Border-color қасиеті

border-color қасиеті барлық жақтардың шекара түсін бір уақытта немесе әр жақ үшін жеке белгілейді. Қасиеттің мәні ретінде ⁅a href="/kk/markup/manual/css/reference/units/colors/"⁆түс бірліктерінің⁅/a⁆ кез келген түрі қолданылады. Әдепкі мән: блок мәтінінің түсі сияқты.

Қасиет мына қасиеттер үшін қысқартылған қасиет болып табылады: 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;
}

Результат:

Сондай-ақ қараңыз