CSS Kenarlık (Border) Ekleme – Tasarım Kodlama
CSS

CSS Kenarlık (Border) Ekleme

CSS’ te kullanılan border özelliği kullanarak bir öğenin kenarlığının stilini, genişliğini ve rengini belirleyebilirsiniz. Kenarlıklara uygulayabileceğiniz biçimler için hangi özellikleri kullanabileceğinizi ve yöntemleri yazının devamında bulacaksınız.

CSS “border-style” Özelliği:

border-style özelliği, görüntülenecek kenarlık türünü belirtir.

Aşağıdaki değerlere izin verilir:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Yukarıdaki border-style özelliğinin alabileceği değerleri inceleyelim.

Ekran Çıktısı:

Not: “border-style”  özelliği ayarlanmadıkça, aşağıda açıklanan diğer CSS kenarlık özelliklerinden hiçbiri HERHANGİ bir etkiye sahip olmayacaktır!

CSS “border-width” Özelliği:

Kenarlık genişliği özelliği dört kenarlığa ait genişliğini belirtir. (üst ,sağ ,sol , alt)

Genişlik, belirli bir boyut (px, pt, cm, em, vb.) olarak veya önceden tanımlanmış üç değerden birini kullanarak ayarlanabilir: ince (thin), orta(medium) veya kalın(thick).

border-width özelliğine birkaç farklı şekilde değer verebilirsiniz.

border-width:5px; Bu şekilde bir kullanımda tüm kenarlıkların genişliği (üst, sağ, alt, sol) 5 piksel olacaktır.

border-width:5px 3px; Bu şekilde bir kullanımda üst ve alt kenarlık genişliği 5px, sol ve sağ kenarlık genişliği 3px olacaktır.

border-width:3px 2px 4px 1px; Bu şekilde kullanımda sırasıyla üst, sağ, alt ve sol kenarlık genişliği 3px, 2px,4px ve 1px olacaktır.

 

Örnek:

Ekran Çıktısı:

 

CSS “border-color” Özelliği:

Bu özellik kullanılmadığında varsayılan olarak kenarlık rengi siyahtır. Kenarlık rengini border-color özelliğini kullanarak belirleyebilirsiniz.

Ekran Çıktısı:

 

CSS te border özelliğine ait çeşitli kullanımlarını ve açıklamalarını inceleyin.

Yukarıdaki CSS kodları paragrafın üst (top) ve alt (bottom) kenarlığını noktalı, sağ (right) ve sol (left) kenarlığını düz olarak ayarlar.

 

Yukarıdaki CSS kodları paragrafın üst ve alt kenarlıklarını noktalı sol ve sağ kenarlıklarını düz çizgi olarak ayarlar.

 

Yukarıdaki CSS kodları paragrafın kenarlıklarının tümünü 5px genişliğinde düz çizgi ve kırmızı olarak ayarlayacaktır. Eğer tüm kenarlıklar aynı özellikte olacaksa yukarıdaki biçimlendirmeyi kullanarak daha az kod yazmak mümkün olacaktır.

CSS Kenarlık Köşesi Yuvarlama:

border-radius özelliği kullanarak, bir öğeye yuvarlanmış kenarlıklar ekleyebilirsiniz.

Örnek:

 

Yorum bırak