Css Kenarlık

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
  • border-width
  • border-color
  • border
  • border-radius

Border-style Özelliği

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-top-style : Sadece üst kenar çizgisi eklemek için kullanılır.
  • Border-right-style : Sadece sağ kenar çizgisi eklemek için kullanılır.
  • Border-bottom-style : Sadece alt kenar çizgisi eklemek için kullanılır.
  • Border-left-style : Sadece sol kenar çizgisi eklemek için kullanılır.

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 :

  • dotted : Noktalı
  • dashed : Kesik Çizgili
  • solid : Düz çizgi
  • double : Çift çizgi
  • groove : 3 Boyutlu İçe doğru kabarık 
  • ridge : 3 Boyutlu Dışa doğru kabarık 
  • inset : 3 Boyutlu üst ve sol kenar belirgin kenarlık
  • outset : 3 Boyutlu alt ve sağ kenar belirgin kenarlık
  • none : Kenarlık yok
  • hidden : Gizli kenarlık ekle
  • mix : Karışık kenarlık ekleme

Border Style Özelliği Kullanımı

<style>

.kenarlik{

border-style:dotted;

}

</style>

Kodu Çalıştır

Border Style Mix Özelliği Kullanımı

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>

 

Border-top-style Özelliği

Sadece üst kenarlık eklemek için kullanılmaktadır.

Border-top-style Özelliği Kullanımı

<style>

.ustkenar{

border-top-style:dashed;

}

</style>

Kodu Çalıştır

Border-right-style Özelliği

Sadece sağ kenarlık eklemek için kullanılmaktadır.

Border-right-style Özelliği Kullanımı

<style>

.sagkenar{

border-right-style:solid;

}

</style>

Kodu Çalıştır

Border-bottom-style Özelliği

Sadece alt kenarlık eklemek için kullanılmaktadır.

Border-bottom-style Özelliği Kullanımı

<style>

.altkenar{

border-bottom-style:dotted;

}

</style>

Kodu Çalıştır

Border-left-style Özelliği

Sadece sol kenarlık eklemek için kullanılmaktadır.

Border-left-style Özelliği Kullanımı

<style>

.solkenar{

border-left-style:solid;

}

</style>

Kodu Çalıştır

Border-width Özelliği

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:

  • Border-top-width: Sadece üst kenarın kalınlığını belirlemek için kullanılır.
  • Border-right-width: Sadece sağ kenarın kalınlığını belirlemek için kullanılır.
  • Border-bottom-width: Sadece alt kenarın kalınlığını belirlemek için kullanılır.
  • Border-left-width: Sadece sol kenarın kalınlığını belirlemek için kullanılır.

Değer olarak pixel girilebildiği gibi aşağıdaki değerlerde girilebilmektedir. Bu değerler:

  • thin : İnce kenar
  • medium : orta kalınlıkta kenar
  • thick : kalın kenar

Border-width Özelliği Kullanımı

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.

Border-width Pixel Değeri

<style>

.kenarkalinligi{

border-style:solid;
border-width:10px;

}

</style>

Kodu Çalıştır

Border-width Thin Değeri 

<style>

.kenarince{

border-style:solid;
border-width:thin;

}

</style>

Kodu Çalıştır

Border-width Medium Değeri

<style>

.kenarorta{

border-style:solid;
border-width:medium;

}

</style>

Kodu Çalıştır

Border-width Thick Değeri

<style>

.kenarkalin{

border-style:solid;
border-width:thick;

}

</style>

Kodu Çalıştır

 Kısa Kullanımı :

border-width: üstpx sağpx altpx solpx; olarak belirlenebilir. 

Border-top-width Özelliği

Border-top-width özelliği üst kenarın kalınlığını belirlemek için kullanılır.

Border-top-width Özelliği Kullanımı

<style>

.ustkenar{

border-style:solid;
border-top-width:5px;

}

</style>

Kodu Çalıştır

Border-right-width Özelliği

Border-right-width özelliği sağ kenarın kalınlığını belirlemek için kullanılır.

Border-right-width Özelliği Kullanımı

<style>

.sagkenar{

border-style:solid;
border-right-width:5px;

}

</style>

Kodu Çalıştır

Border-bottom-width Özelliği

Border-bottom-width özelliği alt kenarın kalınlığını belirlemek için kullanılır.

Border-bottom-width Özelliği Kullanımı

<style>

.altkenar{

border-style:solid;
border-bottom-width:5px;

}

</style>

Kodu Çalıştır

Border-left-width Özelliği

Border-left-width özelliği sol kenarın kalınlığını belirlemek için kullanılır.

Border-left-width Özelliği Kullanımı

<style>

.solkenar{

border-style:solid;
border-left-width:5px;

}

</style>

Kodu Çalıştır

Border-color Özelliği

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:

  • Border-top-color: Sadece üst kenarın rengini belirlemek için kullanılır.
  • Border-right-color: Sadece sağ kenarın rengini belirlemek için kullanılır.
  • Border-bottom-color: Sadece alt kenarın rengini belirlemek için kullanılır.
  • Border-left-color: Sadece sol kenarın rengini  belirlemek için kullanılır.

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. 

Border-Color Özelliği Kullanımı

<style>

.renk{

border-style:double;
border-color:red;

}

</style>

Kodu Çalıştır

Border-top-color Özelliği

Border-top-color özelliği üst kenarın rengini belirlemek için kullanılır.

Border-top-color Özelliği Kullanımı

<style>

.ustrenk{

border-style:double;
border-top-color:red;

}

</style>

Kodu Çalıştır

Border-right-color Özelliği

Border-right-color özelliği sağ kenarın rengini belirlemek için kullanılır.

Border-right-color Özelliği Kullanımı

<style>

.sagrenk{

border-style:dotted;
border-right-color:blue;

}

</style>

Kodu Çalıştır

Border-bottom-color Özelliği

Border-bottom-color özelliği alt kenarın rengini belirlemek için kullanılır.

Border-bottom-color Özelliği Kullanımı

<style>

.altrenk{

border-style:dotted;
border-bottom-color:purple;

}

</style>

Kodu Çalıştır

Border-left-color Özelliği

Border-left-color özelliği sol kenarın rengini belirlemek için kullanılır.

Border-left-color Özelliği Kullanımı

<style>

.solrenk{

border-style:dashed;
border-left-color:pink;

}

</style>

Kodu Çalıştır

Border Özelliği

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.

Border Özelliği Kullanımı:

<style>

.kenar{

border:5px dotted blue;

}

</style>

Kodu Çalıştır

Border-radius Özelliği

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. 

Border-radius Özelliği Kullanımı

<style>

.kenar{

border-style:solid;
border-radius:7px;

}

</style>

Kodu Çalıştır