myNotlar Logo

borderStyle


Internet Explorer 4 Firefox 1 Opera 3.5

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
bicimAşağıda gösterilen borderStyle değerlerden birini alarak dört kenarın ortak biçimini belirler.

üstÜst kenar biçimini belirler. Ayrıca, borderTopStyle ile belirlenebilir.
sağSağ kenar biçimini belirler. Ayrıca, borderRightStyle ile belirlenebilir.
altAlt kenar biçimini belirler. Ayrıca, borderBottomStyle ile belirlenebilir.
solSol kenar biçimini belirler. Ayrıca, borderLeftStyle ile belirlenebilir.

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.xxOpera 9.xx
none
border-style özelliği değerlerinin popüler tarayıcılardaki biçim ve renk karşılaştırmaları
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ç
DIV - 1
DIV - 2
İ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 | Oyunlar |