CSS Border Özelliği

CSS border özelliği bir HTML elementinin kenar / sınır çizgisinin kalınlığını, şeklini, rengini ayarlamaya yarar.

Bir HTML Elementinin 4 kenarına da çizgi çekilebilir. Bu çizgiler birbirinden bağımsız, farklı özelliklere sahip olabilir.

Örnek bir border: Bu <p> etiketinin border özellikleri border:1px solid #ff0000

Kenar Çizgisi Stilleri (border-style)

border-style kenar çizgisinin tarzını belirtir. Bu çizgi düz, noktalı, parçalı çizgili ve daha pek çok stilde olabilir.

border-style özelliği şu değerleri alabilir:

• 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

border-style özelliğine atanan bu değerler şu şekilde görüntülenir:

dotted

ashed

solid

double

groove

ridge

inset

outset

Border yok

Gizli border

Karışık border

<h2>border-style Özelliği</h2>
<p>Border yani sınır / kenar çizgisinin nasıl görüntüleneceğini belirler:</p>

<p style="border-style: dotted;">dotted </p>
<p style="border-style: dashed;">dashed</p>
<p style="border-style: solid;">solid</p>
<p style="border-style: double;">double</p>
<p style="border-style: groove;">groove</p>
<p style="border-style: ridge;">ridge</p>
<p style="border-style: inset;">inset</p>
<p style="border-style: outset;">outset</p>
<p style="border-style: none;">Border yok</p>
<p style="border-style: hidden;">Gizli border</p>
<p style="border-style: dotted dashed solid double;">Karışık border</p>

Kenar Çizgisi Genişliği (border-width)

CSS border-width özelliği kenar çizgisinin kalınlığını belirler.

px, pt, cm, em  gibi farklı birimler ile genişlik özelliği verilebildiği gibi, thin (ince), medium (orta), thick(kalın) gibi önceden tanımlanmış kalınlık isimleri de kullanılabilir.

border-width:1px  şeklinde kullanıldığında 4 kenar da 1px kalınlığında olacaktır.

border-width:5px 10px 15px 20px şeklinde tanımlandığında üst 5px, sağ 10px, alt 15px, sol 20px kalınlığında olacaktır.

<style>
p.bir {
    border-style: solid;
    border-width: 5px;
}

p.iki{
    border-style: solid;
    border-width: medium;
}

p.uc{
    border-style: dotted;
    border-width: 3px 6px 9px 12px ;
}
</style>

Kenar Çizgisi Rengi (border-color)

CSS border-color özelliği ile kenar çizgisinin rengi ayarlanabilir.

border-color özelliği şu tür değerler alabilir:

• Renk ismi (red,blue,yellow gibi)
• Hex değerler (#ffcc44 gibi)
• RGB değerler (rgb(255,0,0) gibi)
• transparan

border-color:red değeri verilirse 4 çizgi de kırmızı olur.

border-color: red blue yellow green gibi kullanılırsa 4 çizgi de farklı renk olur.

<style>
p.bir {
    border-style: solid;
    border-color: red;
}

p.iki {
    border-style: solid;
    border-color: #00ff00;
} 

p.uc {
    border-style: solid;
    border-color: red green blue yellow;
} 
</style>

Kenar Çizgisi Kısa Yazım

border özelliği şu şekilde kullanılabilir: border:1px solid red bu yazım kısa yazımdır. Uygulanan element 1px kalınlığında, düz ve kırmızı renkli sınır çizgisine sahip olur.

border: kalınlık stil renk şeklinde kullanılır.

p {
    border: 5px solid red;
}

Dilerseniz tek bir taraf için (sağ, sol, alt, üst gibi) kenar çizgisinin stilini belirleyebilirsiniz:

p {
    border-left: 6px solid yellow;
    background-color: #1f1f1f;
}

Eğer bu şekilde tek bir kenar stillendirilecekse;

• border-left  sol çizgi
• border-right  sağ çizgi
• border-top  üst çizgi
• border-bottom  alt çizgi

ile biçimlendirilebilir.

Yuvarlak Kenar Çizgileri (border-radius)

CSS border-radius özelliği kenar çizgilerini yuvarlatmak için kullanılır.

p.yuvarlak1 {
    border: 2px solid red;
    border-radius: 4px;
}

p.yuvarlak2 {
    border: 2px solid blue;
    border-radius: 10px;
}