myNotlar Logo

borderColor


Internet Explorer 4 Firefox Opera

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
renkKenarlığı görünmez/saydam yapan transparent değerini veya HTML Renk tanımlamaları ile belirtilebilen bir renk değeri alır.

üstÜst kenar rengini belirler. Ayrıca borderTopColor belirlenebilir.
sağSağ kenar rengini belirler. Ayrıca borderRightColor belirlenebilir.
altAlt kenar rengini belirler. Ayrıca borderBottomColor belirlenebilir.
solSol kenar rengini belirler. Ayrıca borderLeftColor belirlenebilir.

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ç



İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | YasinKa |