19 Nisan 2013

CSS Border

Border özelliğini, herhangi bir nesnenin kenarlarına çizgi ekleyerek belirlenmesi için kullanırız.

Kullanılabilir Border Şekilleri:

Kullanmadan önce border için, bir şekil seçelim.

  1. none; tüm kenarları ortadan kaldırır.
  2. dotted; kenarları yuvarlak noktalar halinde çizerek belirler.
  3. dashed; kenarları noktalı karelerle çizerek belirler.
  4. solid; kenarları devamlı çizgi halinde çizerek belirler.
  5. double; kenarlara kalın ve ince çizgi ekleyerek 2 çizgiyle belirlemesini sağlar.
  6. groove; üst ve sol kenarlara bir yol , alt ve sağ kenara bir başka yol belirler.
  7. ridge; kenarları gölge ekleyerek belirler.
  8. inset; üst kenarı çıkık, alt kenarı ise basık halde çizerek belirler.
  9. outset; üst kenarı basık, alt kenarı ise çıkık halde çizerek belirler.
  10. hidden; kenarları ortadan kaldırarak yok eder.

Yukardaki şekillerden birini seçtikten sonra, kenarların kaç px de ve hangi rengi alacağı değerlerini de belirleyelim.

Kullanım Kodu:

<style>
#kutum{
border:dashed 1px #40a0ff;
}
</style>


<div id="kutum">Border kullanılarak hazırlanmış div örneği.</div>

Kullanım Örneği:

Gördüğünüz bu divin dört bir kenarına border özelliği verildi, dashed şekli seçildi, 1px değeri verildi ve açık mavi tonda bir renk seçilerek hazırlandı.

Buraya kadar border'ın görevini ve şekillerini öğrendik tamam fakat, ya biz div'i dört bir kenarını değil de sadece bir veya iki kenarına boreder kullanmak istiyorsak? o zaman ne yapacağız?

Padding ve margin özelliklerinden de bildiğiniz gibi Css'nin bazı özelliklerini hem çoklu hemde tek olarak kullanmak mümkündür.Border özelliğini kullanırken de aynı şekilde kullanmamız mümkündür.

Sadece Kullanılabilir Değerler:

Aşağıdaki değerleri kullanarak kenarların birbirinden ayırı (farklı) değeler almasını sağlayabiliriz.

  1. border-top: Nesnenin sadece üst kenarlarını belirler.
  2. border-left: Nesnenin sadece sol kısmını belirler.
  3. border-right: Nesnenin sadece sağ ksmını belirler.
  4. border-bottom: Nesnenin sadece alt kısmını belirler.

Kullanım Kodu:

<style>
#kutum{
border-top:solid #40a0ff 3px;
border-left:solid #40a0ff 1px;
border-right:solid #40a0ff 1px;
border-bottom:solid #40a0ff 3px;
}
</style>


<div id="kutum">Dört tarafına ayrı ayrı border özelliği kullanılarak hazırlanmış bir div örneği.</div>

Kullanım Örneği:

Gördüğünüz bu divin dört bir kenarına ayrı ayrı border özelliği verildi, solid şekli seçildi, açık mavi tonda bir renk değeri verildi. üst kısma 3px, sol kısma 1px, sağ kısma 1px, alt kısma ise 3px değerleri verilerek hazırlandı.

Bütün bunlara ek olarak şu şekilde de kullanmamız mümkündür.

  1. border-top-style:dotted;
  2. border-right-style:solid;
  3. border-bottom-style:dotted;
  4. border-left-style:solid;

Uyarılar:

  1. Border'ın tüm şekilleri (solid, dotted gibi)her dökümanda işlev görmeyebilir. Döküman ile ilgili bilginiz yok ise html sayfamızı incelemenizi tavsiye ederim.
  2. Özellikleri kullanırken, px yada em gibi değerleri belirtmediğiniz taktirde border standart olarak, 1px değerini alır.
  3. Yine renk belirtmediğiniz taktirde, body tagına verilen renk üzerinden işlev görür.