Css border nedir özellikleri nelerdir nasıl kullanılır buna değinelim.
Border elementlerimize verdiğimiz kenarlıktır. Çerveve çizgisi gibi düşünebiliriz.
Border 3 adet özellik almaktadır.Bunlar border-style, border-width ve border-color özellikleridir.
border-style
Çizgimizin türünü temsil etmektedir.Alacağı değerker aşağıdaki gibidir
- dotted – Noktalı çizgi
- dashed – Kesik çizgilerden oluşan çizgi
- solid – Düz çizgi
- double – Çift çizgi
- groove – 3 boyutlu oluklu çizgi. Bu efekt border rengine göre ortaya çıkar.
- ridge – Çıkıntılı çizgi. Bu efekt border rengine göre ortaya çıkar.
- inset – İçe doğru 3 boyutlu görünen çizgi. Bu efekt border rengine göre ortaya çıkar.
- outset – Dışa doğru 3 boyutlu çizgi. Bu efekt border rengine göre ortaya çıkar.
- none – Kenar çizgisi yok
- hidden- Gizli kenar çizgisi
Örnek
<body>
<p class="solid">Border nedir nasıl kullanılır.</p>
<p class="dotted">cetinyazilim.com</p>
<p class="dashed">Yazılım Mühendisliği</p>
<p class="groove">Html-Css-Bootstrap-Javascript</p>
</body>
<style>
.solid {
border-style: solid;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.groove {
border-style: groove;
}
</style>

border-width
Kenarlığımızın kalınlığı belirler.Varsayılan olarak sıfırdır.
<body>
<p class="solid">Border nedir nasıl kullanılır.</p>
<p class="dotted">cetinyazilim.com</p>
<p class="dashed">Yazılım Mühendisliği</p>
<p class="groove">Html-Css-Bootstrap-Javascript</p>
</body>
<style>
.solid {
border-style: solid;
border-width: 3px;
}
.dotted {
border-style: dotted;
border-width: 6px;
}
.dashed {
border-style: dashed;
border-width: 9px;
}
.groove {
border-style: groove;
border-width: 12px;
}

border-color
Kenarlığımızın rengini belirler.
<body>
<p class="solid">Border nedir nasıl kullanılır.</p>
<p class="dotted">cetinyazilim.com</p>
<p class="dashed">Yazılım Mühendisliği</p>
<p class="groove">Html-Css-Bootstrap-Javascript</p>
</body>
<style>
.solid {
border-style: solid;
border-width: 3px;
border-color:tomato;
}
.dotted {
border-style: dotted;
border-width: 6px;
border-color:green;
}
.dashed {
border-style: dashed;
border-width: 9px;
border-color:yellow;
}
.groove {
border-style: groove;
border-width: 12px;
border-color:purple;
}
</style>

Örnek
Aşağıdaki örnekte farklı renkler yazaraktan renklendirme yapabiliriz.
<body>
<p class="solid">Border nedir nasıl kullanılır.</p>
</body>
<style>
.solid {
border-style: solid;
border-width: 5px;
border-color: red green blue yellow;
}
</style>

Önemli
Şimdiye kadar gördüğümüz bu 3 özelliği tek satırda vermemiz mümkündür.
<body>
<p>Border nedir nasıl kullanılır.</p>
</body
<style>
p {
border: 5px solid green;
}
</style>
