Īpašība border-color

Īpašība border-color nosaka apmales krāsu visām malām vienlaikus vai atsevišķi katrai malai. Īpašības vērtība var būt jebkura krāsas vienība. Noklusējuma vērtība: tāda pati krāsa kā bloka tekstam.

Īpašība ir saīsinājuma īpašība sekojošām īpašībām: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintakse

cssselektors {
  border-color: krāsa;
}

Vērtību skaits

Īpašība var pieņemt 1, 2, 3 vai 4 vērtības, kas norādītas atstarpes atdalītas:

Piemērs

Izkrāsosim bloka apmali sarkanā krāsā:

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

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

Результат:

Piemērs

Norādīsim sarkanu apmali augšējai un apakšējai malai, bet zilganzaļu (cyan) labajai un kreisajai malai:

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

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

Результат:

Piemērs

Norādīsim sarkanu apmali augšējai malai, zilganzaļu (cyan) labajai, zaļu apakšējai, melnu kreisajai malai:

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

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

Результат:

Piemērs

Norādīsim vienlaikus atšķirīgu biezumu, tipu un apmales krāsu:

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

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red cyan green black;
  width: 300px;
  height: 100px;
}

Результат:

Piemērs

Ja apmales krāsa nav norādīta border-color - tā tiks ņemta no īpašības color:

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

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

Результат:

Skatiet arī