Egenskapen border-color

Egenskapen border-color angir fargen på kanten for alle sider samtidig eller separat for hver side. Verdien til egenskapen er enhver fargeenhet. Standardverdi: samme farge som blokkens tekst.

Egenskapen er en sammensatt egenskap for følgende egenskaper: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntaks

cssvelger {
  border-color: farge;
}

Antall verdier

Egenskapen kan ta 1, 2, 3 eller 4 verdier, angitt mellom mellomrom:

Eksempel

La oss fargelegge kantene på blokken i rødt:

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

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

Результат:

Eksempel

La oss sette rød kant for topp og bunn side, og blå for høyre og venstre side:

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

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

Результат:

Eksempel

La oss sette rød kant for toppsiden, blå for høyre, grønn for bunn, svart for venstre side:

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

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

Результат:

Eksempel

La oss sette samtidig forskjellig tykkelse, type og farge på kanten:

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

Результат:

Eksempel

Hvis kantfargen ikke er satt i border-color - vil den hentes fra egenskapen color:

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

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

Результат:

Se også