Svojstvo border-color
Svojstvo border-color postavlja boju
ivice za sve strane istovremeno ili
odvojeno za svaku stranu. Vrednost svojstva
mogu biti bilo koje jedinice
za boju. Podrazumevana vrednost: ista
boja kao i tekst bloka.
Svojstvo je skraćeno svojstvo za
sledeća svojstva: border-left-color,
border-right-color,
border-top-color,
border-bottom-color.
Sintaksa
selektor {
border-color: boja;
}
Broj vrednosti
Svojstvo može prihvatiti 1, 2,
3 ili 4 vrednosti, navedene
razmakom:
| Broj | Opis |
|---|---|
1 |
Tip za sve strane istovremeno. |
2 |
Prva vrednost za vrh i dno, druga - za levu i desnu ivicu. |
3 |
Prva vrednost za vrh, druga - za levu i desnu ivicu, treća - za donju. |
4 |
Prva vrednost za gornju ivicu, druga - za desnu, treća - za donju, četvrta - za levu ivicu. |
Primer
Hajde da obojimo ivicu bloka u crvenu boju:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red;
width: 300px;
height: 100px;
}
:
Primer
Postavimo crvenu ivicu za gornju i donju stranu, a plavu za desnu i levu stranu:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red blue;
width: 300px;
height: 100px;
}
:
Primer
Postavimo crvenu ivicu za gornju stranu, plavu za desnu, zelenu za donju, crnu za levu stranu:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Primer
Postavimo istovremeno različitu debljinu, tip i boju ivice:
<div id="elem"></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Primer
Ako boja ivice nije zadata u border-color
- uzeće se iz svojstva color:
<div id="elem"></div>
#elem {
color: red;
border-style: solid;
border-width: 2px;
width: 300px;
height: 100px;
}
:
Pogledajte takođe
-
svojstvo
border-width,
koje postavlja debljinu ivice -
svojstvo
border-style,
koje postavlja tip ivice -
svojstvo
border,
koje je skraćeno svojstvo za ivicu