Xüsusiyyət border-color

Xüsusiyyət border-color butun tərəflər üçün eyni vaxtda və ya hər tərəf üçün ayrı-ayrılıqda çərçivə rəngi təyin edir. Xüsusiyyətin dəyəri kimi istənilən rəng vahidləri istifadə edilə bilər. Susmaya görə dəyər: blokun mətn rəngi ilə eyni.

Xüsusiyyət aşağıdakı xüsusiyyətlər üçün qısaldılmış xüsusiyyətdir: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaksis

selektor {
	border-color: rəng;
}

Dəyərlərin sayı

Xüsusiyyət 1, 2, 3 və ya 4 sayda dəyər qəbul edə bilər, dəyərlər boşluqla ayrılır:

Say	Təsvir
`1`	Butun tərəflər üçün eyni vaxtda tip.
`2`	Birinci dəyər üst və alt üçün, ikinci - sol və sağ çərçivələr üçün.
`3`	Birinci dəyər üst üçün, ikinci - sol və sağ çərçivələr üçün, üçüncü - alt üçün.
`4`	Birinci dəyər üst çərçivə üçün, ikinci - sağ çərçivə üçün, üçüncü - alt çərçivə üçün, dördüncü - sol çərçivə üçün.

Nümunə

Gəlin blokun çərçivəsini qırmızı rəngə boyayaq:

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

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

Nümunə

Üst və alt tərəflər üçün qırmızı, sağ və sol tərəflər üçün mavi çərçivə təyin edək:

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

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

Nümunə

Üst tərəf üçün qırmızı, sağ tərəf üçün mavi, alt tərəf üçün yaşıl, sol tərəf üçün qara çərçivə təyin edək:

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

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

Nümunə

Eyni vaxtda müxtəlif qalınlıq, tip və çərçivə rəngi təyin edək:

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

Nümunə

Əgər çərçivə rəngi border-color-də təyin edilməyibsə - o, color xüsusiyyətindən götürüləcək:

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

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

Həmçinin bax

xüsusiyyət border-width,
çərçivə qalınlığını təyin edir
xüsusiyyət border-style,
çərçivə tipini təyin edir
xüsusiyyət border,
çərçivə üçün qısaldılmış xüsusiyyətdir