CSS’de “Border” Özelliği Kullanımı
Bu yazıda, CSS’de “border” özelliğini ve nasıl kullanılacağını ele alacağız. Border (kenarlık), bir elementin çevresine çerçeve eklemek için kullanılır ve farklı stiller, renkler ve genişlik ayarlarıyla özelleştirilebilir.
“Border” Özelliği
CSS’de border özelliği, HTML öğelerine kenarlık eklemek için kullanılır. Bunu bir hücrenin çeperine ya da bir resmin etrafındaki çerçeveye benzetebiliriz.
Kenarlık, HTML öğesinin dış dünyaya karşı sınırlarını belirler. Dolayısıyla bir kenarlık, belirli bir width (genişlik), style (stil) ve color (renk) gibi özelliklere sahiptir ve aşağıdaki gibi yazılır:
... {
border-style: value;
border-width: value;
border-color: value;
}
1. border-style: Kenar çizgilerine stil vermek için kullanılır. Bu özellik aşağıdaki tabloda gösterilen değerlerden (value) birini alabilir:
| Değer (Value) | Görevi |
|---|---|
| dotted | noktalı çizgi |
| dashed | kesik çizgili çizgi |
| solid | düz çizgi |
| double | çift çizgi |
| groove | üç boyutlu oluklu çizgi |
| ridge | çıkıntılı çizgi |
| inset | içe doğru üç boyutlu görünen çizgi |
| outset | dışa doğru üç boyutlu çizgi |
| none | kenar çizgisi yok |
| hidden | gizli kenar çizgisi |
2. border-width: Kenar çizgilerine kalınlık vermek için kullanılır. Değer (value) olarak kalınlığı belirtmek için sayısal değerlerle beraber “px, pt, cm, em” gibi ölçü birimleri kullanılabildiği gibi, “thin (ince), medium (orta), thick (kalın)” gibi önceden tanımlanmış kelimeler de kullanılabilir.
3. border-color: Kenar çizgilerinin rengi ayarlamak için kullanılır. Renk değerleri (value) için “red, blue, yellow” gibi renk adları kullanılabildiği gibi, #ffcc44 şeklinde HEX değerleri veya rgb(255,0,0) şeklinde RGB değerleri kullanılabilir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Örneği</title>
<style>
.mavi-kenarlik {
border-style: solid;
border-width: 2px;
border-color: blue;
}
</style>
</head>
<body>
<div class="mavi-kenarlik">
Bu div, mavi renkte solid bir kenarlığa sahiptir!
</div>
</body>
</html>
Yeri gelmişken kenarlık değerlerinde varsayılan değerleri gösterelim:
border-style: none;border-width: medium;border-color: color;(elementin rengi ne ise odur)
Dolayısıyla genişlik, stil veya renk özelliklerini CSS kodunuzda belirtmezseniz, web tarayıcısı ilgili özelliğin varsayılan değerini atar.
“Border” Özelliğinin Tek Satırda Yazımı
... {
border-style: value;
border-width: value;
border-color: value;
}
Yukarıdaki kodu incelediğimizde, kenar özelliklerinin üç satırda yazıldığı görülmektedir. Bu özellikleri her seferinde ayrı ayrı yazmak yerine, CSS bize bu bilgileri border özelliği ile tek bir satırda tanımlama olanağı sunar. Böylece CSS kodunun daha okunabilir ve sade olması sağlanır.
Yani border özelliğini kullanmak, border-width, border-style ve border-color özelliklerini tek bir satırda birleştirir. Söz dizimi (syntax) ise şu şekilde olur:
<!-- Uzun Yazım -->
... {
border-width: value;
border-style: value;
border-color: value;
}
<!-- Kısa Yazım -->
. {
border: value value value;
}
Belirtmek isterim ki, dört kenarı oluşturmak için kullanılan çizgiler birbirleriyle aynı özelliklere sahip olabildiği gibi birbirinden bağımsız, farklı özelliklere de sahip olabilir. Bu durumda her birini ayrı ayrı tanımlamamız gerekir. Yeni her biri için ayrı ayrı style, width (genişlik) ve color (renk) özellikleri belirlenebilir. Bakınız:
- border-top: Öğenin üst kenarını tanımlar.
border-top-width: Üst kenarın kalınlığını belirtir.border-top-style: Üst kenarın stilini (dotted, solid, dashed vb.) belirtir.border-top-color: Üst kenarın rengini belirtir.
- border-right: Öğenin sağ kenarını tanımlar.
border-right-width: Sağ kenarın kalınlığını belirtir.border-right-style: Sağ kenarın stilini belirtir.border-right-color: Sağ kenarın rengini belirtir.
- border-bottom: Öğenin alt kenarını tanımlar.
border-bottom-width: Alt kenarın kalınlığını belirtir.border-bottom-style: Alt kenarın stilini belirtir.border-bottom-color: Alt kenarın rengini belirtir.
- border-left: Öğenin sol kenarını tanımlar.
border-left-width: Sol kenarın kalınlığını belirtir.border-left-style: Sol kenarın stilini belirtir.border-left-color: Sol kenarın rengini belirtir.
“Border Radius” Kullanımı
Kutu modelinde fark ettiğiniz üzere köşeleri dik olan dikdörtgenvari bir yapı olduğu görülmektedir. Ancak modern web tasarım trendleri ve estetik gereksinimler doğrultusunda bu dik köşeler bazen kullanıcı deneyimini veya tasarımın genel estetiğini olumsuz etkileyebilir. İşte tam da bu noktada, bu dik köşeleri yuvarlayarak daha yumuşak ve hoş bir görünüm elde etmek için CSS’in border-radius özelliği devreye girer. Bu özellik, HTML öğelerinin köşelerini yuvarlamamıza olanak tanır, böylece daha yumuşak ve estetik bir görünüm elde edebiliriz.
CSS’deki border-radius özelliği, bir öğenin dört köşesinin yuvarlaklık derecesini tanımlar. Bu özellik, aşağıdaki gibi tek bir değerle ya da birden çok değerle tanımlanabilir:
1. Tek Değer: Tüm dört köşe için aynı yuvarlaklık değeri belirtilir. Bakınız:
div {
border-radius: 10px;
}
2. İki Değer: İlk değer yatay yuvarlaklık için, ikinci değer ise dikey yuvarlaklık için kullanılır. Örneğin:
div {
border-radius: 10px 20px;
}
3. Dört Değer: Saat yönünde, üst sol köşeden başlayarak her bir köşe için ayrı ayrı yuvarlaklık değeri belirtilir. Aşağıdaki örneği inceleyiniz:
div {
border-radius: 10px 20px 30px 40px;
}
❗ border-radius özelliği, ayrıca her köşe için iki farklı değer alabilir, böylece eliptik yuvarlaklıklar da oluşturulabilir. Örneğin:
div {
border-radius: 50px 25px;
}
Yukarıdaki kodumuz, div öğesinin yatay yarıçapını 50 piksel ve dikey yarıçapını 25 piksel olarak belirler, böylece eliptik bir yuvarlaklık oluşturur.
❗ CSS ile bir kutuyu tam anlamıyla bir daire yapmak için öncelikle aynı genişlik ve yüksekliğe sahip bir element oluşturabilir ve ardından yarıçapı, kutunun genişliğinin yarısına eşit olan %50‘ye ayarlayabilirsiniz. Bakınız:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daire Şekilli Div</title>
<style>
div {
height: 60px;
width: 60px;
border: 3px solid blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Bir köşenin yuvarlaklığını derece cinsinden belirlemek yerine, piksel cinsinden belirlemeniz gerekir. Örneğin, bir karenin sağ üst köşesini yuvarlamak için şu şekilde yapabilirsiniz:
div {
height: 60px;
width: 60px;
border: 3px solid blue;
border-radius: 0 10px 0 0; (sol üst, sağ üst, sağ alt, sol alt)
}
“Display” Değerlerde “Border” Özelliği Kullanımı
CSS “border” özelliği, bir elementin etrafında bir sınır çizmek için kullanılır. Bu sınır, renk, stil ve genişlik gibi özelliklerle özelleştirilebilir. Ancak border özelliğinin bir elementte nasıl göründüğü, elementin display değerine (örneğin block, inline veya inline-block gibi) bağlı olarak değişir. İşte detaylar:
- Block-level elements (Blok seviyesindeki elementler):
div,p,h1–h6,ul,ligibi elementler blok seviyesinde çalışır. Bu tür elementlerde border özelliği, elementin tüm çevresini kapsar. Border, elementin kutu modeline dahil edilir; bu nedenle yüksekliği ve genişliği etkiler. Eğer bir blok elemente genişlik ve yükseklik değeri atanmışsa, border bu değerlere eklenir ve elementin toplam boyutunu artırır. - Inline-level elements (Satır içi elementler):
span,agibi elementler satır içi elementlerdir. Bu tür elementlerde border özelliği, yalnızca elementin içeriğini çevreler. Satır içi elementlerde border, elementin yüksekliğini veya satır akışını etkilemez. Örneğin, birspanelementine border eklediğinizde, bu sınır yalnızca içeriği çevreler ve satırın geri kalanına müdahale etmez. - Inline-block elements:
inline-blockdeğeri, bir elementin hem satır içi hem de blok özelliklerini taşımasını sağlar. Border özelliği, bu tür elementlerde hem yatay hem de dikey boyutları kapsar. Birinline-blockelemente genişlik ve yükseklik atanabilir, bu da sınırın elementin tamamını çevrelemesini sağlar. Bu, satır içi elementlere ek bir düzenleme esnekliği kazandırır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Örnekleri</title>
<style>
.block {
display: block;
width: 200px;
height: 100px;
border: 2px solid blue;
}
.inline {
display: inline;
border: 2px solid green;
}
.inline-block {
display: inline-block;
width: 150px;
height: 50px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="block">Blok Element</div>
<span class="inline">Satır İçi Element</span>
<div class="inline-block">Satır İçi Blok Element</div>
</body>
</html>
Özetle, border özelliği tüm HTML elementlerinde kullanılabilir ancak bu özelliğin görünümü ve etkisi, elementin display özelliğine bağlı olarak değişir. Bir elemente sınır eklerken, elementin türüne göre sınırın nasıl görüneceğini dikkate almalısınız.