borderStyle özelliği, elementin dört kenarının kenarlık çizgi biçimlerini belirleyen borderBottomStyle, borderLeftStyle, borderRightStyle ve borderTopStyle özelliklerinin hepsinin birden belirlenmesini sağlar.
DOM Sözdizimi
element.style.borderStyle = bicim
element.style.borderStyle = "üst sağ alt sol"
CSS Sözdizimi
border-style: bicim
border-style: üst sağ alt sol
| bicim | Aşağıda gösterilen borderStyle değerlerden birini alarak dört kenarın ortak biçimini belirler. |
Değerlerin bir kerede ayrı ayrı belirlenmesi durumunda yukarıda gösterildiği gibi aynen üst, sağ, alt ve sol sıralaması geçerlidir.
borderStyle Değerleri
borderStyle değerlerini gösteren bu tablo, aşağıdaki ortak değerlerle div elementi kullanılarak hazırlanmıştır. "Canlı Sonuç" sütununda görülen tüm kutular aktif olarak oluşturulmaktadır. Internet Explorer, Firefox ve opera başlığı altında bulunan tek parça resim, bu değerlerle Internet Explorer 6/7/8 beta 1, Firefox 2.xx ve Opera 9.xx tarayıcılarından elde edilen ekran görüntülerinin birleştirilmesiyle oluşturulmuş ve başka bir işlem yapılmamıştır.
{
border-color: #3090F0;
border-width: 6px;
background-color: silver;
}
| border-style | Canlı Sonuç | Internet
Explorer 6/7/8 | Internet
Explorer 6/7/8
!DOCTYPE Olmadan | Firefox 2.xx | Opera 9.xx |
|---|
| none |
|
 |
| hidden (IE 8) |
|
| dashed |
|
| dotted |
|
| double |
|
| groove |
|
| inset |
|
| outset |
|
| solid |
|
| ridge |
|
Aşağıdaki örnek, bir div elementinin CSS border-style özelliği ile dört kenarının farklı biçimlerde belirtilmesini göstermektedir.
<style type="text/css">
#ornekDiv1, #ornekDiv2
{
width:150px;
height:120px;
margin:5px;
}
#ornekDiv1
{
border-width: 2px;
border-color: black;
border-style: solid double dashed dotted;
}
#ornekDiv2
{
border-width: 6px;
border-color: blue;
border-style: solid double dashed dotted;
}
</style>
<div id="ornekDiv1">DIV - 1</div>
<div id="ornekDiv2">DIV - 2</div>
Canlı Sonuç