A border-color tulajdonság

A border-color tulajdonság a szegély színét határozza meg egyszerre minden oldalon, vagy külön-külön minden oldalra. A tulajdonság értéke bármilyen szín egység lehet. Alapértelmezett érték: ugyanaz a szín, mint a blokk szövegének.

A tulajdonság rövidítés a következő tulajdonságokra: border-left-color, border-right-color, border-top-color, border-bottom-color.

Szintaxis

cssszelektor {
  border-color: szín;
}

Értékek száma

A tulajdonság 1, 2, 3 vagy 4 értéket fogadhat el, szóközzel elválasztva:

Példa

Állítsuk be a blokk szegélyének színét pirosra:

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

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

Результат:

Példa

Állítsunk be piros szegélyt a felső és alsó oldalra, és kéket a jobb és bal oldalra:

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

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

Результат:

Példa

Állítsunk be piros szegélyt a felső oldalra, kéket a jobb oldalira, zöldet az alsóra, feketét a bal oldalira:

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

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

Результат:

Példa

Állítsunk be egyszerre különböző vastagságot, típust és színt a szegélynek:

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

Результат:

Példa

Ha a szegély színe nincs megadva a border-color -tulajdonságban - akkor a color tulajdonságból veszi át:

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

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

Результат:

Lásd még