border özelliği, elementin üç farklı kenarlık özelliği olan borderWidth, borderStyle ve borderColor özelliklerinin hepsinin dört kenar için belirlenmesini sağlar. borderWidth, borderStyle ve borderColor özellikleri tek başlarına dört farklı kenar için dörder farklı değer alabilirler. border özelliği ise bu özelliklere tüm kenarlar için ortak değerler atanmasını sağlar.
DOM Sözdizimi
element.style.border = "gen | bicim | renk"
Bu değerler String tipinde, aralarına boşluk ekleyerek belirlenmelidir. Değerlerin hangisinin önce veya sonra olduğunun bir önemi yoktur. Aşağıdaki örnekte gösterildiği gibi istenen herhangi bir sırada belirtilebilir.
CSS Sözdizimi
border: gen | bicim | renk
| gen | Kenarlık genişlik değeri. Ayrıca, borderWidth ile belirlenebilir. |
| bicim | Kenarlık biçimi. Ayrıca, borderStyle ile belirlenebilir. |
| renk | Kenarlık rengi. Ayrıca, borderColor ile belirlenebilir. |
Aşağıdaki örnek, border özelliği ile solid, groove ve ridge tipinde kenarlık oluşturulmasını göstermektedir.
<style type="text/css">
#ornekDiv1, #ornekDiv2, #ornekDiv3 {
width:120px;
height:90px;
}
#ornekDiv1 {
border: solid 10px black;
}
#ornekDiv2 {
border: 10px #0090FF groove;
}
#ornekDiv3 {
border: #30B030 10px ridge;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<div id="ornekDiv1"></div>
</td><td>
<div id="ornekDiv2"></div>
</td><td>
<div id="ornekDiv3"></div>
</td></tr></table>
Canlı Sonuç