CSS Dersleri
Temel Bilgiler
CSS Nedir?
CSS Kod Yapısı
CSS ID ve Class Seçimi
CSS Nasıl Eklenir?

CSS Stilleri
CSS Arkaplanlar
CSS Yazılar
CSS Yazı Tipleri
CSS Bağlantılar
CSS Listeleme
CSS Tablolar

Kenarlıklar
CSS Kutu Modeli
CSS Kenarlıklar (Border)
CSS Dış Kenarlık (Outline)
CSS Dıştan Boşluk (Margin)
CSS İçten Boşluk (Padding)

CSS İleri Düzey
CSS Gruplama ve Üzerine Yazma
CSS Sınırlamalar
CSS Gösterme - Gizleme
CSS Pozisyon Belirleme (position)
CSS Kaydırma (float)
CSS Hizalama (align)
CSS Özel İfadeler (Pseudo)
CSS Transparanlık (opacity)
CSS Çıktı Türleri (media)
CSS Özellik Seçimi (Attribute)
CSS'ye Genel Bakış

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

CSS Kenarlıklar (Border)



Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar şunlardır:

Ayrıca bunlarla birlikte şu konularda da bilgi vereceğiz:

border-style: Kenarlık Stili

Kenarların görünüşünün nasıl olacağı ile ilgili bilgi vermemizi sağlar.

Kullanabileceğiniz stiller:

none - Kenarlık yok
dotted - Noktalı
dashed - Kesik çizgili
solid - Çizgi
double - Çift çizgi
groove
ridge
inset
outset

Örnek bir kullanım:

   .kutum { border-style: dotted; }
   

border-width: Kenarlık Boyutu

Kenar genişliğini belirtmemizi sağlar. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Örnek bir kullanım:

   .kutum { border-style: solid; border-width: 1px; }
   

border-color: Kenarlık Rengi

Kenarlık rengini bu komutla değiştirebiliriz. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Renk kullanımı hakkında bilgi için buraya tıklayın.

Örnek bir kullanım:

   .kutum {
      border-style: solid;
      border-width: 1px;
      border-color: #0000CC;
   }
   

Kenarları Ayrı Ayrı Şekillendirmek

İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

  • border-left-style - Sol kenarın şekli.
  • border-right-style - Sağ kenarın şekli.
  • border-top-style - Üst kenarın şekli.
  • border-bottom-style - Alt kenarın şekli.
Ayrıca border-style dört kenarın değerini de alacak şekilde yazılabilir. Örneğin:

border-style: dotted solid double dashed;

Üst kenar - dotted,
Sağ kenar - solid,
Alt kenar - double,
Sol kenar - dashed.

Farkettiyseniz border-style yazdıktan sonra sırasıyla saat yönünde kenarları ayrı ayrı belirttik.

border-style: dotted solid double;

Üst kenar - dotted,
Sağ ve Sol kenar - solid,
Alt kenar - double,

Bu kullanımda 4. kenarı yazmadık. Bu kenar solu işaret ettiği için tam tersi olan Sağ taraftaki özelliği alacaktır.

border-style: dotted solid;

Üst kenar ve alt kenar - dotted,
Sağ ve Sol kenar - solid,
Bu kullanımda Yukarı - Aşağı kenarlar ilk yazılan dotted, Sol ve Sağ kenarlar ikinci yazılan solid biçiminde olacaktır.

Kenar Belirtmenin Kısa Yolu

Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneğe bakalım:

   .kutum {
      border: 1px #0000CC solid;
   }
   

Buradaki örnekte yer alan üç kodu tek bir kodda birleştirdik. Sırasıyla önce border-width değerini yazdık, sonra border-color ve en son border-style ile üç özelliği birlikte kullandık.

Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:

  • border-left - Sol kenar
  • border-right - Sağ kenar
  • border-top - Üst kenar
  • border-bottom - Alt kenar
Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014