Css dilinde herhangi bir html ögesine kenarlık eklemek, kenar çizgisinin kalınlığı ve rengini belirlemek için kullanılmaktadır. Css dilinde kenarlık eklemek için border özelliği kullanılmaktadır.
Css kenar özellikleri:
Border-style özelliği kenarlığın türünü belirlemek için kullanılmaktadır. Border-style özelliği eklenen ögeye çerçeve eklemek için ve eklenecek çerçevenin türünü belirlemek için kullanılmaktadır. Bu özellik kendi içinde 4 alt özelliğe sahiptir. Bunlar:
Border-style özelliği ile html ögelerine kenarlık eklenebilmektedir. Bu kenarlıkların nasıl olacağı noktalı, kesik çizgili, düz vb. bazı değerler ile belirlenebilmektedir. Border-style özelliği ve alt özelliklerinin alabildiği değerler :
<style>
.kenarlik{
border-style:dotted;
}
</style>
Kenarlığa karışık stil eklemek için kullanılır. Bu parametrenin kullanılabilmesi için border-style özelliğine 4 adet değer girilmesi gerekmektedir. Bu değerler sırası ile Üst, Sağ, Alt, Sol şeklinde olmaktadır.
<style>
.kenarlikmix{
border-style:dashed solid dotted inset;
}
</style>
Sadece üst kenarlık eklemek için kullanılmaktadır.
<style>
.ustkenar{
border-top-style:dashed;
}
</style>
Sadece sağ kenarlık eklemek için kullanılmaktadır.
<style>
.sagkenar{
border-right-style:solid;
}
</style>
Sadece alt kenarlık eklemek için kullanılmaktadır.
<style>
.altkenar{
border-bottom-style:dotted;
}
</style>
Sadece sol kenarlık eklemek için kullanılmaktadır.
<style>
.solkenar{
border-left-style:solid;
}
</style>
Css border-width özelliği kenarın kalınlığını belirlemek için kullanılmaktadır. Border-width özelliği kendi içinde 4 alt özelliğe sahiptir. Bunlar:
Değer olarak pixel girilebildiği gibi aşağıdaki değerlerde girilebilmektedir. Bu değerler:
Border-width özelliğinin pixel ve diğer üç değer olan thin, medium ve thick değerleri ile kenar kalınlığının nasıl belirlendiğini aşağıdaki örneklerden öğrenebilirsiniz.
<style>
.kenarkalinligi{
border-style:solid;
border-width:10px;
}
</style>
<style>
.kenarince{
border-style:solid;
border-width:thin;
}
</style>
<style>
.kenarorta{
border-style:solid;
border-width:medium;
}
</style>
<style>
.kenarkalin{
border-style:solid;
border-width:thick;
}
</style>
Kısa Kullanımı :
border-width: üstpx sağpx altpx solpx; olarak belirlenebilir.
Border-top-width özelliği üst kenarın kalınlığını belirlemek için kullanılır.
<style>
.ustkenar{
border-style:solid;
border-top-width:5px;
}
</style>
Border-right-width özelliği sağ kenarın kalınlığını belirlemek için kullanılır.
<style>
.sagkenar{
border-style:solid;
border-right-width:5px;
}
</style>
Border-bottom-width özelliği alt kenarın kalınlığını belirlemek için kullanılır.
<style>
.altkenar{
border-style:solid;
border-bottom-width:5px;
}
</style>
Border-left-width özelliği sol kenarın kalınlığını belirlemek için kullanılır.
<style>
.solkenar{
border-style:solid;
border-left-width:5px;
}
</style>
Css border-color özelliği kenarın rengini belirlemek için kullanılmaktadır. Border-color özelliği kendi içinde 4 alt özelliğe sahiptir. Bunlar:
Değer olarak ingilizce renk adı, hex kodu veya rgb kodu girilebilmektedir.
Kısa Kullanımı :
border-color: üstkenarrenk sağkenarrenk altkenarrenk solkenarrenk; olarak belirlenebilir.
<style>
.renk{
border-style:double;
border-color:red;
}
</style>
Border-top-color özelliği üst kenarın rengini belirlemek için kullanılır.
<style>
.ustrenk{
border-style:double;
border-top-color:red;
}
</style>
Border-right-color özelliği sağ kenarın rengini belirlemek için kullanılır.
<style>
.sagrenk{
border-style:dotted;
border-right-color:blue;
}
</style>
Border-bottom-color özelliği alt kenarın rengini belirlemek için kullanılır.
<style>
.altrenk{
border-style:dotted;
border-bottom-color:purple;
}
</style>
Border-left-color özelliği sol kenarın rengini belirlemek için kullanılır.
<style>
.solrenk{
border-style:dashed;
border-left-color:pink;
}
</style>
Border özelliği tüm kenar işlemlerini tek seferde yapmak için kullanılmaktadır. Kenar kalınlığı, stili (noktalı,düz vb.) ve rengi sırası ile tek özellik altında belirlemek için kullanılır.
<style>
.kenar{
border:5px dotted blue;
}
</style>
Border-radius özelliği köşeleri yuvarlaklaştırma işlemi yapmak için kullanılır. Border-radius özelliğine değer olarak pixel girilmektedir, piksel değeri yükseldikçe köşeler ovalleşir yani yuvarlak köşeli hale gelir.
<style>
.kenar{
border-style:solid;
border-radius:7px;
}
</style>
| Önceki Ders: Css Font Özellikleri | Sonraki Ders: Css Kenar Dışı Boşluk |