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

Результат:

Տես նաև