CSS Border(Kenarlık) Kullanımı

Bir HTML elementine çerçeve(border) eklemek mümkündür. Bunun için border özelliği kullanılır. Bu dersimizde HTML border kullanımına yer verdik.

Bir HTML elementine çerçeve eklemek için aşağıdaki kodları kullanabiliriz:

  • border-color
  • border-width
  • border-style

 

Ayrıca yine bu dersimiz içerisinde kenarlık kullanımının kısa yoluna ve bir HTML ögesinin kenarlarını ayrı ayrı şekillendirme konularına değineceğiz.

 

 

CSS border-style: Kenarlık Stili

Kenarların nasıl görüneceği hakkında bilgi verir. Aşağıda border özellikleri verilmiştir:

Örnek:

.ornek { border-style: dotted; }

 

 

CSS border-width: Kenarlık Boyutu

Kenarlık genişliği belirtir. Öncelikle bir border-style belirtilmelidir.

Örnek:

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

 

 

CSS border-color: Kenarlık Rengi

Bu komutla kenarlık rengi değiştirilir. Öncelikle bir border-style belirtilmelidir.

Örnek:

   .kutum {
      border-style: solid;
      border-width: 2px;
      border-color: #FFC0CB;
   }

 

 

CSS Kenarları Şekillendirme

  • border-left-style: Sol kenar
  • border-right-style: Sağ kenar
  • border-top-style: Üst kenar
  • border-bottom-style: Alt kenar

Yukarıdaki kullanımlar dışında border-style ögesi ile 4 kenarın özelliği de yazılabilir.

Kullanım-1:

border-style: dotted solid double dashed;

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

CSS border-style kullanımında  sırasıyla kenarlar saat yönünde ayrı ayrı belirtilir.

Kullanım-2:

border-style: dotted solid double;

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

CSS border-style kullanımında 4. kenar solu işaret etmektedir ve yazılmamıştır. Yazılmadığı için tam tersi olan sağ tarafın özelliğini alır.

Kullanım-3:

border-style: dotted solid;

Üst kenar ve alt kenar: dotted,
Sağ ve Sol kenar: solid,

CSS border-style kullanımında yukarı-aşağı kenarlar için dotted, sol-sağ kenarlar için solid şeklinde yazılır.

 

 

CSS Kenar Belirtme Kısa Yolu

Yalnızca border ifadesi ile border-width, border-color ve border-style değerleri belirtilebilir.

 .ornek{
      border: 2px #FFC0CB solid;
   }

Yukarıda 3 farklı kod satırını tek kod satırında birleştirdik. Border-width, border-color ve border-style ifadelerini sırası ile yazdık.

NOT:

  • border-left: Sol kenar
  • border-right: Sağ kenar
  • border-top: Üst kenar
  • border-bottom: Alt kenar

Yukarıdaki komutları da kenarlara kısayol olarak uygulayabiliriz.



Kimler Neler Demiş?

avatar
  Subscribe  
Bildir