Proprietatea border-color

Proprietatea border-color setează culoarea bordurii pentru toate laturile simultan sau separat pentru fiecare latură. Valoarea proprietății poate fi orice unitate de culoare. Valoarea implicită: aceeași culoare ca și textul blocului.

Proprietatea este o proprietate-scurtătură pentru următoarele proprietăți: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaxă

cssselector {
  border-color: culoare;
}

Numărul de valori

Proprietatea poate accepta 1, 2, 3 sau 4 valori, specificate prin spațiu:

Exemplu

Să colorăm bordura blocului în roșu:

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

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

Результат:

Exemplu

Să setăm o bordură roșie pentru părțile de sus și de jos și albastră pentru părțile din dreapta și stânga:

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

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

Результат:

Exemplu

Să setăm o bordură roșie pentru partea de sus, albastră pentru dreapta, verde pentru jos, neagră pentru partea din stânga:

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

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

Результат:

Exemplu

Să setăm simultan grosimi, tipuri și culori diferite pentru bordură:

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

Результат:

Exemplu

Dacă culoarea bordurii nu este setată în border-color - aceasta va fi preluată din proprietatea color:

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

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

Результат:

Veți și