Omadus border-color

Omadus border-color määrab piirjoone värvi kõikidele külgedele korraga või eraldi iga külje jaoks. Omaduse väärtuseks on mis tahes värviühikud. Vaikeväärtus: sama värv kui ploki tekstil.

Omadus on lühendomadus (shorthand property) järgmiste omaduste jaoks: border-left-color, border-right-color, border-top-color, border-bottom-color.

Süntaks

cssvalija {
  border-color: värv;
}

Väärtuste arv

Omadus võib võtta 1, 2, 3 või 4 väärtust, mis antakse tühikuga eraldatuna:

Näide

Teeme ploki piirjoone punaseks:

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

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

Результат:

Näide

Määrame punase piirjoone ülemise ja alumise külje jaoks ning sinise parema ja vasaku külje jaoks:

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

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

Результат:

Näide

Määrame punase piirjoone ülemise külje jaoks, sinise parema, rohelise alumise, musta vasaku külje jaoks:

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

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

Результат:

Näide

Määrame korraga erineva paksuse, tüübi ja värvi piirjoonele:

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

Результат:

Näide

Kui piirjoone värvi ei ole määratud border-color -ga, võetakse see omadusest color:

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

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

Результат:

Vaata ka