CSS ile kenar çizgileri oluşturmak (border kullanımı)

CSS ile border yani kenarlık oluşturmak oldukça kolaydır ve bir kaç yolu da vardır. İstediğiniz kalınlık da ve farklı stillerde kenarlık (border) kullanarak farklı görünümler elde edebilirsiniz.

border için özellikleri şu şekilde verebiliriz;

border : kenar kalınlığı - kenarlık stili - kenarlık rengi - initial - inherit ; olarak css kodumuzu yazabiliriz.

Yukarıdaki açıklamadaki (initial) özelliği, aslında tarayıcıların CSS özelliklerine geri dönme anlamı taşımaktadır. Yani başlangıçta biz hiçbir CSS kodu yazmamış olsak da tarayıcının bir default (varsayılan) css özellikleri bulunmaktadır. 

#border{
border:initial;
}

#border{
border:inherit;
}

İnherit özelliği ise kalıtsallık ile ilgili bir özelliktir. CSS ile verdiğimiz bir özellik bazı elementlerin kendisini değiştirmekle kalmayıp ayrıca bu değişen elementin alt elementlerini de değiştirmektedir. Border özelliği ise bu şekilde alt elementlere etki etmez.

Bunun gibi bazı özellikler vardır ve bu özellikleri bilmekte fayda vardır. Border için inherit değeri atadığımızda, atadığımız element kendisinin üst elementindeki border değerini alacaktır.

Border için kenar kalınlığına geldiğimizde ise;

#border{
border:10px solid gray;
}

#border{
border:5px solid gray;
}

Yukarıda görüldüğü gibi px karşılığında değer girerek border (kenarlık) kalınlıklarını değiştirebilmekteyiz. Aynı zamanda yukarıdaki gri rengindeki kenarlıkları da renk kodları veya standart renkleri kullanacak isek renk adlarını kullanarak değiştirebiliriz.

#border{
border:5px solid red;
}

Ayrıca border kalınlığını elementin her tarafına verebildiğiniz gibi sadece istediğiniz köşelere de verebilmektesiniz.

#border{
border-left:10px solid red; (sol)
}

#border{
border-right:10px solid red; (sağ)
}

#border{
border-top:10px solid red; (üst)
}

#border{
border-bottom:10px solid red; (alt)
}

#border{
border-style:solid;
border-width:10px 30px; 
}

Yukarıdaki örnekte ise border-width ile ilk olarak x eksenine sonra da y eksenine border (kenar) kalınlığı vermiş olduk.

#border{
border-style:solid;
border-width:10px 30px 80px 100px; 
}

Yukarıdaki örnekte ise border-width özelliği ile üst kenardan başlayarak saat yönünde farklı farklı kenar kalınlığı vermiş olduk.