CSS Kutu Modeli – Kenarlık(border) Özellikleri

Kenarlık(border), içerik alanı ve padding etrafındaki bir veya daha fazla
çizgiye denir.

Kutu Modeli

boder-style
border-top-style, border-right-style, border-bottom-style, border-left-style
border-width
border-top-width, border-right-width, border-bottom-width, border-left-width
border-color
border-top-color, border-right-color, border-bottom-color, border-left-color
border

Sırasıyla incelersek:

border-style

Yapısı : border-style: <deger>
Aldığı Değerler : [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-style özelliği kenarlık stilini belirlememizi sağlar.(Örn: dotted(noktalı), double(çift) vd.) 10 farklı değeri CSS desteklemektedir. Bu özellik kenarlığın görünmesi için
tanımlanması gereklidir. Bir veya dört değer alabilir eğer dört değer alırsa
sırasıyla üst, sağ, alt ve sol kenarlık stilini belirler. Eğer tek değeri
varsa tüm kenarlık değeri ataması yapılmış demektir. Eğer iki veya üç değer
ataması yapılmış ise margin‘de gördüğümüz sıralama söz konusudur.

p.yeni {
	border-style: solid;
}

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

border-top-style, border-right-style, border-bottom-style, border-left-style

border-top-style, border-right-style, border-bottom-style, border-left-style border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

h1{
    border-style: solid;
    border-left-style: none;
}

Browser Uyumu:
Internet Explorer 4+(kısmen),6+ (tam)
Netscape 4+(kısmen), 6+ (tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

border-width

Yapısı : border-width: <deger>
Aldığı Değerler : [ thin | medium | thick | <uzunluk değeri > ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

İlk olarak stili belirledikten sonra kenarlık kalınlığını belirlemek için border-width değeri kullanılır.

border-width yüzde değeri alamaz.

p {
    margin: 5px;
    background-color: silver;
    border-style: solid;
    border-width: 1px;
}
  </ol>

Browser Uyumu:
Internet Explorer 4+
Netscape (kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

border-top-width, border-right-width, border-bottom-width, border-left-width

Yapısı : border-[top,left,right,bottom]-width: <deger>
Aldığı Değerler : thin | medium | thick | <uzunluk değeri > | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

h2 {
    border-left-width: medium;
    border-style: solid;
}

Browser Uyumu:
Internet Explorer 4+ (kısmen), 6+(tam)
Netscape 4+(kısmen), 6+ (tam)
Opera 3.6, 4+
W3C’s CSS Level 1+
CSS Profile 1.0

border-color

Yapısı : border-color: <deger>
Aldığı Değerler : [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-color özelliği kenarlık rengini belirler. (X)html’deki bordercolor ile benzerdir.

p {
    border-style: solid;
    border-color: gray;
}

Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda
yapılabilir.

Browser Uyumu:
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

border-top-color, border-right-color, border-bottom-color, border-left-color

Yapısı : border-[top,left,right,bottom]-color: <deger>
Aldığı Değerler : [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-color özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

Not: Bir kenarlığı yok etmek için kalınlık değeri veririz. Birde CSS2 ile
birlikte gelen transparent özelliği vardır ki bu kenarlığı yok etmez sadece
görünmez yapar.

p {
    border-style: solid;
    border-color: gray;
}

Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda
yapılabilir.

Browser Uyumu:
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

border

Yapısı : border: <deger>
Aldığı Değerler : <border-width> | <border-style> | <renk>
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border yukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.

h1 {
	border: thick silver solid;
}

Bu özellikleri tek tek atamak isteseydik şöyle bir kod yazmamız gerekecekti.

h1 {
border-top: thick silver solid;
border-bottom: thick silver solid;
border-right: thick silver solid;
border-left: thick silver solid;
}

Browser Uyumu:
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

emrah özşahin diyor ki:

Haziran 22, 2008, 20:22

MErhaba, Border-bottom: için resim kullanmamız mümkünmü yoksa ayrı bir div oluşturarak onu diğer divin altına yerleştirmemizmi gerekir. haberlerin alt alta göründüğü bir scriptimiz var burada haberlerin aralarında çizgi yerine bi resim kullanmak istiyoruz, bunu tek divde halletmek için border bottom a renk yerine reism eklemek istiyoruz olurmu acaba.

Cevapla

fatih.hayrioglu diyor ki:

Mart 21, 2008, 10:06

bunu css ile yapabiliriz ancak

tek sorun var bunu ie6 desteklemez.

Mehmet Gündüz diyor ki:

Mart 20, 2008, 15:58

Ben bir tablo yapmak istiyorum border 1-2px olabilir fark etmez. Bunun içerisine bir yazı yazıyorum. Mouse ile üzerine geldiğimiz zaman border rengi değişiyor. Yani yazıdaki-linklerdeki hover özelliğini border’a uygulamak istiyorum. Nasıl yapabilirim? Ya da bunu CSS ile yapabilmek mümkün mü?
Şimdiden teşekkür ederim.