border-color Özelliği

border-color özelliği, kenarlığın rengini tüm taraflar için aynı anda veya her bir taraf için ayrı ayrı belirler. Özelliğin değeri olarak herhangi bir renk birimi kullanılabilir. Varsayılan değer: bloğun metin rengiyle aynı renk.

Bu özellik, aşağıdaki özellikler için bir kısaltma özelliğidir: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sözdizimi

seçici {
	border-color: renk;
}

Değer Sayısı

Özellik, boşlukla ayrılmış olarak 1, 2, 3 veya 4 değer alabilir:

Sayı	Açıklama
`1`	Tüm taraflar için aynı tip.
`2`	İlk değer üst ve alt için, ikincisi - sol ve sağ kenarlıklar için.
`3`	İlk değer üst için, ikincisi - sol ve sağ kenarlıklar için, üçüncüsü - alt için.
`4`	İlk değer üst kenarlık için, ikincisi - sağ kenarlık için, üçüncüsü - alt kenarlık için, dördüncüsü - sol kenarlık için.

Örnek

Bir bloğun kenarlığını kırmızı renge boyayalım:

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

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

Örnek

Üst ve alt kenarlar için kırmızı, sağ ve sol kenarlar için mavi renk belirleyelim:

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

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

Örnek

Üst kenar için kırmızı, sağ kenar için mavi, alt kenar için yeşil, sol kenar için siyah renk belirleyelim:

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

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

Örnek

Aynı anda farklı kalınlık, tip ve kenarlık rengi belirleyelim:

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

Örnek

Eğer kenarlık rengi border-color ile belirtilmemişse, color özelliğinden alınacaktır:

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

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

Ayrıca Bakınız

kenarlık kalınlığını belirleyen border-width özelliği
kenarlık tipini belirleyen border-style özelliği
kenarlık için bir kısaltma özelliği olan border özelliği