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%)
|