CSS Kenarlıklar (Borders)

Bir HTML sayfasında bulunan her elementin bir kenarlığı vardır. Fakat siz CSS ile biçimlendirmediğiniz sürece bu kenarlıklar varsayılan olarak görünmez. Bizde bu yazımızda CSS ile kenarlıklar (borders) konusunu işleyeceğiz. Kenarlıklara nasıl stiller verebileceğimizi göreceğiz. Ayrıca tüm bu stilleri nasıl kısa ve basit bir şekilde yapabileceğimizi de öğreneceğiz. Hemen dersimize başlayalım.

Kenarlıklara verebileceğimiz dört çeşit stil vardır. Bunlar, kenarlık stili (border-style), kenarlık boyutu (border-width), kenarlık rengi (border-color) ve kenarlık yarıçapıdır (border-radius). Şimdide bunları nasıl kullanabileceğimizi görelim.

CSS Border-style (Kenarlık Stili)

Kenarlıkların bir çok stili vardır. Bu stiller kenarlıkların nasıl görüneceği ile ilgilidir. Kullanabileceğimiz stiller;

• none – Kenarlık yok.
• solid – Düz kenarlık.
• dotted – Noktalı kenarlık.
• dashed – Kesikli kenarlık.
• double – Çift kenarlık.
• ridge – 3B düz kenarlık.
• groove – 3D oluklu kenarlık.
• inset – 3D yerleştirme kenarlık.
• outset – 3D başlangıç kenarlık.
• hidden – Gizli kenarlık.

Hemen bir kaç tanesi ile örnek kullanım görelim.

.kenarlik1{
  border-style:dotted;
}

.kenarlik2{
  border-style:solid;
}

.kenarlik3{
  border-style:ridge;
}

Ayrıca her bir kenara (üst, sağ, aşağı, sol) ayrı ayrı stiller verebilirsiniz. Hemen bir örnek ile görelim.

.kenarlik{
  border-style : solid inset double dashed;
}

Yukarıdaki kenarlıkların verileceği sıra üst, sağ, alt ve sol kenarlıktır.

CSS Border-width (Kenarlık Boyutu)

Kenarlıkların stilini belirleyebildiğimiz gibi boyutlarını da belirleyebiliyoruz. Ancak bunu yapmadan önce kenarlık boyutu vereceğimiz elementin bir kenarlık stili olduğundan emin olmalıyız çünkü, yukarıda da belirttiğimiz gibi varsayılan olarak kenarlıklar görünmezler. Yalnızca biz bir stil verdikten sonra görünürler. Stil verdikten sonra istediğimiz gibi boyut verebiliriz. Hemen bir örnek ile görelim.

.kenarlik{
  border-style : solid;
  border-width : 5px;
}

Kenarlık stilinde olduğu gibi, kenarlık verirken de her kenara ayrı boyutlar verebiliriz.

.kenarlik{
  border-style : solid;
  border-width: 1px 5px 8px 12px;
}

CSS Border-color (Kenarlık Rengi)

Kenarlık rengi verirken, kenarlık boyutunda olduğu gibi önceden bir stil belirtmiş olmamız gerekiyor.

Başlamadan önce renklerin nasıl kullanılacağı hakkında bilginiz yoksa veya eksiklikleriniz varsa ‘HTML renk kodları ve kullanımları‘ adlı yazımızı okuyabilirsiniz. Şimdi örnek bir kullanım ile görelim.

.kenarlik{
  border-style : solid;
  border-width : 5px;
  border-color : red;
}

Kısa kullanımı;

.kenarlik{
  border-style : solid;
  border-color: red black blue pink;
}

CSS Border-radius (Kenarlık Yarıçapı)

Border-radius kullanarak kenarlıklarımızı yumuşatabiliriz. Hemen kullanımını görelim.

.kenarlik{
  border-style : solid;
  border-radius : 10px; <!-- Ne kadar arttırırsak köşeler o kadar yumuşak olur. -->
}

Bu yazımızda CSS kenarlıklar (borders) konusunu işledik. Umarım faydalı olmuştur. Diğer CSS derslerimizi de okumak isterseniz buradan tümüne ulaşabilirsiniz.