Border-color hossasy

border-color hossasy, çägiziň reňkini ähli tarapa bir wagtda ýa-da her bir tarap üçin aýratyn kesgitleýär. Hossanyň bahasy bolsa reňk üçin birimler hökmünde bolýar. Bellenen bahasy: blokdaky tekstiň reňki bilen meňzeş.

Hossa, aşakdaky hossalar üçin gysgaldylan hossa bolup hyzmat edýär: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaksis

cssselektor {
  border-color: reňk;
}

Bahalaryň sany

Hossa 1, 2, 3 ýa-da 4 sany bahalary boşluk arkaly görkezip alyp bilýär:

Mysal

Gelin, blokyň çägizini gyzyl reňge boýaýaly:

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

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

Результат:

Mysal

Ýokarky we aşaky tarap üçin gyzyl çägi, sag we çep tarap üçin bolsa gök reňkli çägi kesgitläýäris:

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

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

Результат:

Mysal

Ýokarky tarap üçin gyzyl çägi, sag tarap üçin gök, aşaky tarap üçin ýaşyl, çep tarap üçin gara çägi kesgitläýäris:

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

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

Результат:

Mysal

Bir wagtda dürli galyňlyk, görnüş we çägiziň reňkini kesgitläýäris:

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

Результат:

Mysal

Eger çägiziň reňki border-color hossasynda kesgitlenmese - ol color hossasyndan alynar:

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

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

Результат:

Şeýle-de serediň