Eigenschap border-color

De eigenschap border-color stelt de kleur van de rand in voor alle zijden tegelijk of afzonderlijk voor elke zijde. De waarde van de eigenschap zijn alle eenheden voor kleur. Standaardwaarde: dezelfde kleur als de tekst van het blok.

De eigenschap is een verkorte eigenschap voor de volgende eigenschappen: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntaxis

cssselector {
  border-color: kleur;
}

Aantal waarden

De eigenschap kan 1, 2, 3 of 4 waarden aannemen, gescheiden door een spatie:

Voorbeeld

Laten we de rand van het blok rood kleuren:

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

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

Результат:

Voorbeeld

Stel een rode rand in voor de boven- en onderkant en een blauwe voor de rechter- en linkerkant:

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

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

Результат:

Voorbeeld

Stel een rode rand in voor de bovenkant, een blauwe voor de rechterkant, een groene voor de onderkant, een zwarte voor de linkerkant:

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 tegelijkertijd verschillende dikte, type en randkleur 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

Als de randkleur niet is ingesteld in border-color - wordt deze overgenomen van de eigenschap color:

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

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

Результат:

Zie ook