Web geliştirme sürecinde, sayfadaki öğeleri ayırt etmek, vurgulamak veya görsel olarak daha estetik hale getirmek için kenarlıklar (border) önemli bir rol oynar. CSS Border, her HTML elemanının etrafında bir çerçeve oluşturmayı sağlar ve bu çerçevenin kalınlığı, rengi, stili ve köşe yuvarlaklığı gibi birçok özelliğini değiştirmemize olanak tanır.
Bu yazıda, CSS’in border (kenarlık) özelliklerini, temel kullanımları ve daha gelişmiş stillendirme teknikleriyle açıklayacağız. Eğer CSS ile yeni tanışıyorsanız, bu bilgiler web sayfalarınızı daha profesyonel bir hale getirmenize yardımcı olacaktır.
1. Border Nedir?
Border, bir HTML öğesinin çevresinde görünen çizgidir. Web sayfalarındaki butonlar, giriş kutuları (input), kutular (div) gibi birçok öğede sınırlar sıkça kullanılır.
button {
border: 2px solid black;
}
Örneğin, bir butona kenarlık ekleyerek onu daha belirgin hale getirebiliriz.
Bu kod, butonun etrafında 2 piksel kalınlığında, siyah ve düz (solid) bir kenarlık oluşturur. Ancak border ile yapabileceklerimiz bununla sınırlı değildir. Kenarlığın rengini, kalınlığını, stilini ve hangi kenarlara uygulanacağını da değiştirebiliriz.
2. Border’ın Temel Özellikleri
Border Kalınlığı (border-width)
Border’ın kalınlığını belirlemek için border-width kullanılır. Piksel (px) gibi ölçü birimleriyle ifade edilir.
div {
border-width: 5px;
}
Bu kod, div etiketine 5 piksel kalınlığında bir kenarlık ekler.
Ayrıca sadece belirli kenarlara kalınlık eklemek için şu özellikler de kullanılabilir:
div {
border-top-width: 3px;
border-right-width: 5px;
border-bottom-width: 2px;
border-left-width: 7px;
}
Bu şekilde, her kenar için farklı kalınlıklar belirleyebilirsiniz.
Border Rengi (border-color)
Kenarlığın rengini değiştirmek için border-color özelliğini kullanabiliriz.
div {
border-width: 3px;
border-color: red;
}
Bu kod, 3 piksel kalınlığında ve kırmızı renkli bir kenarlık oluşturur.
Her kenar için farklı renkler belirlemek de mümkündür:
div {
border-top-color: blue;
border-right-color: green;
border-bottom-color: yellow;
border-left-color: orange;
}
Bu kod, her kenara farklı bir renk atar.
Border Stili (border-style)
Border’ın düz, kesikli, noktalar halinde veya üç boyutlu gibi farklı şekillerde görünmesini sağlamak için border-style kullanılır. En yaygın stiller şunlardır:
| Stil Adı | Görünüm |
|---|
solid | Düz çizgi |
dotted | Noktalı çizgi |
dashed | Kesikli çizgi |
double | Çift çizgi |
groove | 3D oluk efekti |
ridge | 3D çıkıntı efekti |
inset | İçbükey gölge efekti |
outset | Dışbükey gölge efekti |
Örnek kullanım:
div {
border-width: 3px;
border-style: dashed;
border-color: black;
}
Bu kod, siyah renkli ve kesikli (dashed) bir kenarlık oluşturur.
Farklı kenarlar için farklı stiller de tanımlanabilir:
div {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
}
Bu şekilde, her kenara farklı bir stil atayabilirsiniz.
3. Border Kısayolu (Shorthand Kullanımı)
CSS’de border özelliğini daha kısa yazabilmek için kısayol (shorthand) kullanılabilir.
Genel yazım şekli:
border: [kalınlık] [stil] [renk];
Örnek kullanım:
div {
border: 4px solid blue;
}
Bu kod, 4 piksel kalınlığında, düz çizgili ve mavi renkli bir kenarlık oluşturur.
Sadece belirli kenarlar için de shorthand kullanılabilir:
div {
border-top: 3px dashed red;
border-bottom: 5px solid green;
}
Bu kod, üst kenara 3 piksel kesikli kırmızı, alt kenara 5 piksel düz yeşil kenarlık ekler.
4. Border Radius: Kenarları Yuvarlatma
Köşeleri yuvarlatmak için border-radius özelliği kullanılır.
Örnek:
div {
border: 2px solid black;
border-radius: 10px;
}
Bu kod, kutunun köşelerini 10 piksel yuvarlatır.
Daha büyük bir değer vererek tamamen yuvarlak hale getirebiliriz:
div {
border-radius: 50px;
}
Hatta border-radius: 50%; kullanarak tamamen daire şeklinde bir kutu oluşturabiliriz.
Örnek olarak, profil fotoğraflarında yuvarlak görüntü oluşturmak için border-radius: 50% yaygın olarak kullanılır:
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
Bu kod, resmi tamamen daire şekline getirir.
Farklı köşeler için farklı yuvarlatmalar yapmak da mümkündür:
div {
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 5px;
}
Bu şekilde, her köşeye farklı bir yuvarlaklık değeri verebiliriz.
5. Border ve Box-Sizing
Normalde, border eklediğimizde kutunun toplam genişliği artar.
Ancak box-sizing: border-box; kullanırsak, genişlik kenarlıkları da kapsayacak şekilde ayarlanır ve toplam genişlik değişmez.
div {
width: 200px;
height: 200px;
border: 5px solid black;
box-sizing: border-box;
}
Bu kod sayesinde, div tam olarak 200 piksel genişliğinde kalır ve kenarlık içeriğe göre ayarlanır.
Sonuç
CSS Border, web sayfalarındaki elementleri vurgulamak, kutuları belirginleştirmek veya estetik bir tasarım oluşturmak için önemli bir özelliktir.
Öğrendiğimiz konular:
- Border-width ile kalınlığı ayarlama
- Border-color ile renk belirleme
- Border-style ile kenarlık stilini değiştirme
- Border shorthand ile kısa kullanım
- Border-radius ile köşeleri yuvarlatma
- Box-sizing ile toplam genişliği kontrol etme
Bu bilgilerle artık CSS kullanarak kutularınıza şekil verebilir, estetik ve düzenli web sayfaları oluşturabilirsiniz.