Eienskap border-color

Die eienskap border-color stel die kleur van die rand vir al die kante gelyktydig of afsonderlik vir elke kant in. Enige eenhede vir kleur kan as waarde dien. Standaardwaarde: dieselfde kleur as die teks van die blok.

Die eienskap is 'n verkorte eienskap vir die volgende eienskappe: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaksis

cssselektor {
  border-color: kleur;
}

Aantal waardes

Die eienskap kan 1, 2, 3 of 4 waardes aanvaar, gespesifiseer met 'n spasie tussen hulle:

Voorbeeld

Kom ons kleur die rand van die blok rooi:

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

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

Результат:

Voorbeeld

Laat ons 'n rooi rand vir die boonste en onderste kant instel, en 'n ligblou een vir die regter en linker kant:

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

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

Результат:

Voorbeeld

Stel 'n rooi rand vir die boonste kant in, ligblou vir die regter, groen vir die onderste, swart vir die linker kant:

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

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

Результат:

Voorbeeld

Stel gelyktydig verskillende dikte, tipe en kleur van die rand in:

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

Результат:

Voorbeeld

As die randkleur nie in border-color gespesifiseer is nie - sal dit van die eienskap color geneem word:

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

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

Результат:

Sien ook