borderBottomColor

borderBottomColor özelliği, elementin alt kenarlık (border bottom) renginin belirlenmesini sağlar.

DOM Sözdizimi

element.style.borderBottomColor = "renk"

CSS Sözdizimi

border-bottom-color: renk

renk	transparent, HTML Renk Tablosunda belirtilen isimlendirilmiş HTML Renklerinden birini veya aşağıda gösterilen RGB renk belirleme varyasyonları ile belirtilebilen bir renk değeri alarak alt kenarlık rengini belirler.

HTML RGB Renk Değerlerinin Belirlenmesi

borderBottomColor özelliğinin alabileceği renk değerleri temelde üç çeşittir. Bunlardan ilki kenarlığın sayfa üzerinde yer kaplamasına rağmen kendine ait rengi olmayıp altındaki elementin rengini gösteren transparent değeridir. İkincisi isimlendirilmiş HTML Renk değerleridir. Üçüncü tür renk değerleri ise RGB renkleri ile dört farklı şekilde belirtilebilen renklerdir. Bu renklerin belirlenmesi aşağıdaki tabloda kısaca gösterilmiştir. Renklerle ilgili biraz daha geniş bilgiyi HTML Renkleri konusunda bulabilirsiniz.

border-bottom-color: transparent;           // Kenarlığı saydam yapar.
border-bottom-color: red;                   // Ön tanımlı HTML Renk İsimlerinden biri

border-bottom-color: #fff;                  // #rgb
border-bottom-color: #ffffff;               // #rrggbb
border-bottom-color: rgb(255, 255, 255);    // 0 - 255 arası tamsayı
border-bottom-color: rgb(100%, 100%, 100%); // 0.0% - 100.0% arası kayar noktalı sayı

Aşağıdaki örnek, bir DIV elementinin alt kenar renginin CSS border-bottom-color özelliği ile renk ismi atayarak ve RGB renk tanımlamalarının farklı varyasyonları ile belirlenmesini göstermektedir.


<style type="text/css">
.ornekDiv1, .ornekDiv2, .ornekDiv3, .ornekDiv4, .ornekDiv5
{
    border-width: 10px;
    border-style: solid;    
    width: 80px;
    height:60px;
}
.ornekDiv1 {
    border-bottom-color: blue;    
}
.ornekDiv2 {
    border-bottom-color: #00F;
}
.ornekDiv3 {
    border-bottom-color: #0000FF;    
}
.ornekDiv4 {
    border-bottom-color: rgb(0, 0, 255);
}
.ornekDiv5 {
    border-bottom-color: rgb(0%, 0%, 100%);
}
#ornekTablo tr td
{
    width: 20%;
    text-align:center;
    font-size:.8em;
}
</style>

<table id="ornekTablo" border="0">
<tr><td>
    <div class="ornekDiv1"></div> <br/> blue
</td><td>
    <div class="ornekDiv2"></div> <br/> #00F
</td><td>
    <div class="ornekDiv3"></div> <br/> #0000FF
</td><td>
    <div class="ornekDiv4"></div> <br/> rgb(0,0,255)
</td><td>
    <div class="ornekDiv5"></div> <br/> rgb(0%,0%,100%)
</td></tr></table>

Canlı Sonuç

blue

#00F

#0000FF

rgb(0,0,255)

rgb(0%,0%,100%)

İlgili Başlıklar