Vlastnosť border-color

Vlastnosť border-color nastavuje farbu ohraničenia pre všetky strany súčasne alebo samostatne pre každú stranu. Hodnotou vlastnosti sú ľubovoľné jednotky pre farbu. Predvolená hodnota: rovnaká farba ako farba textu bloku.

Vlastnosť je vlastnosťou-skratkou pre nasledujúce vlastnosti: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntax

cssselektor {
  border-color: farba;
}

Počet hodnôt

Vlastnosť môže prijať 1, 2, 3 alebo 4 hodnôt, uvedených medzerou:

Príklad

Nastavme farbu ohraničenia bloku na červenú:

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

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

Результат:

Príklad

Nastavme červené ohraničenie pre hornú a dolnú stranu a modrú pre pravú a ľavú stranu:

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

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

Результат:

Príklad

Nastavme červené ohraničenie pre hornú stranu, modrú pre pravú, zelenú pre dolnú, čiernu pre ľavú stranu:

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

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

Результат:

Príklad

Nastavme súčasne rôznu hrúbku, typ a farbu ohraničenia:

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

Результат:

Príklad

Ak farba ohraničenia nie je nastavená v border-color - bude prevzatá z vlastnosti color:

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

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

Результат:

Pozrite tiež