borderColor özelliği, elementin dört kenarının kenarlık renklerini belirleyen borderBottomColor, borderLeftColor, borderRightColor ve borderTopColor özelliklerinin hepsinin birden belirlenmesini sağlar. Ayrıca renk belirleme işlemini 1..4 arası renk değeri alarak aşağıdaki tabloda gösterilen kombinasyonlarla gerçekleştirir.
DOM Sözdizimi
element.style.borderColor = "renk"
element.style.borderColor = "üst sağ alt sol"
CSS Sözdizimi
border-color: renk
border-color: üst sağ alt sol
| renk | Kenarlığı görünmez/saydam yapan transparent değerini veya HTML Renk tanımlamaları ile belirtilebilen bir renk değeri alır. |
CSS border-color Değerlerinin Gösterimi
| border-color: | Canlı Sonuç | Açıklama |
|---|
| #30A0F0 |
|
Eğer bir renk değeri belirtilirse bu renk tüm kenarlara uygulanır. |
| #30A0F0 #080 |
|
Eğer iki renk belirtilirse ilk renk üst ve alt kenarlara, ikinci renk sol ve sağ kenarlara uygulanır. |
| #30A0F0 #080 #F00 |
|
Eğer üç renk belirtilirse ilk renk üst kenara, ikinci renk sol ve sağ kenarlara, üçüncü renk alt kenara uygulanır. |
| #30A0F0 #080 #F00 #000 |
|
Dört renk belirtildiği ise sırasıyla üst, sağ, alt ve sol kenarlara uygulanır. |
Aşağıdaki örnek, CSS border-color özelliği ile 1..4 arası renk değeri belirtilerek dört farklı div elementinin dört kenarının farklı renklere atanmasını göstermektedir.
<style type="text/css">
.ornekDiv1, .ornekDiv2, .ornekDiv3, .ornekDiv4
{
border-width: 10px;
border-style: solid;
width: 90px;
height:70px;
}
.ornekDiv1 {
border-color: blue;
}
.ornekDiv2 {
border-color: blue green;
}
.ornekDiv3 {
border-color: blue green red;
}
.ornekDiv4 {
border-color: blue green red black;
}
</style>
<div class="ornekDiv1"></div><br/>
<div class="ornekDiv2"></div><br/>
<div class="ornekDiv3"></div><br/>
<div class="ornekDiv4"></div>
Canlı Sonuç