CSS Kenarlıklar (Border) - CSS Dersleri

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:

CSS Kodu

.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:

CSS Kodu

   .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:

CSS Kodu

   .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:

CSS Kodu

   .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