CSS Border Özellikleri Nelerdir ve Nasıl Uygulanır?

CSS border özellikleri (kenar çizgisi), içerik alanı ve kenar içi boşluğu (padding) etrafındaki bir veya daha fazla çizgiye uygulanan özelliklerdir.

Kenar Çizgisi Biçemi (border-style)

Yapısı: border-style: <deger>

Aldığı Değerler: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit

Başlangıç Değeri: Tanımlama yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

div
{
   border-style: solid;
}

border-style özelliği kenarlık biçemini belirlememizi sağlar.(Örnek; dotted (noktalı), double (çift) vb.) 10 farklı değeri CSS desteklemektedir. Bu özellik kenarlığın görünmesi için tanımlanması gereklidir. Bir veya dört değer alabilir. Eğer dört değer alırsa sırasıyla üst, sağ, alt ve sol kenarlık stilini belirler. Eğer tek değeri varsa tüm kenarlık değeri ataması yapılmış demektir.

border-top-style, border-right-style, border-bottom-style, border-left-style

Yapısı: border-[top,left,right,bottom]-style: <deger>

Aldığı Değerler: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Başlangıç Değeri: Tanımlama yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

div
{
   border-top-style: dotted;
}

border-top-style, border-right-style, border-bottom-style, borderleft- style border-style özelliginin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

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

Yapısı: border-width: <deger>

Aldığı Değerler: [ thin | medium | thick | <uzunluk degeri > ]{1,4} | inherit

Başlangıç Değeri: Tanımlama yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

div
{
   border-width: 5px;
}

İlk olarak biçemi belirledikten sonra kenarlık genişliğini belirlemek için border-width değeri kullanılır. border-width yüzde değeri alamaz.

thin : İnce kenar çizgisi.

medium : Orta kalınlıkta kenar çizgisi.

thick : Kalın kenar çizgisi.

Uzunluk: Kenar çizgisi kalınlığı doğrudan belirtilen (göreli olmayan/hesaplanmayan) bir değerdir ve negatif olamaz.

border-top-width, border-right-width, border-bottom-width, border-left-width

Yapısı: border-[top,left,right,bottom]-width: <deger>

Aldığı Değerler: thin | medium | thick | <uzunluk degeri> | inherit

Başlangıç Değeri: Tanımlama yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

div
{
   border-left-style: 7px;
}

border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliginin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

Kenar Çizgisi Rengi (border-color)

Yapısı: border-color: <deger>

Aldığı Değerler: [ <renk> | transparent ]{1,4} | inherit

Başlangıç Değeri: Tanımlama yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

div
{
   border-color: red;
}

border-color özelliği kenarlık rengini belirler.

Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlaması da yapılabilir.

border-top-color, border-right-color, border-bottom-color, border-left-color

Yapısı: border-[top,left,right,bottom]-color: <deger>

Aldığı Değerler: [ <renk> | transparent ]{1,4} | inherit

Başlangıç Değeri: Tanımlama yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

div
{
   border-right-color: yellow;
}

border-color özelliginin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlaması da yapılabilir.

Kenar Çizgisi Resmi (border-image)

Yapısı: border-image: <deger>

Aldığı Değerler: url

Başlangıç Değeri: Tanımlama yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

border-image özelliği kenarlığa resim eklenmesini sağlar.

Kenar Çizgisi Resim Tekrarı (border-image-repeat)

Yapısı: border-image-repeat: <deger>

Aldığı Değerler: repeat | round | no-repeat

Başlangıç Değeri: no-repeat

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

border-image-repeat özelliği kenarlık resminin tekrar durumunu belirler.

Kenar Çizgisi Resim Dilimleri (border-image-slice)

Yapısı: border-image-slice: <deger>

Aldığı Değerler: Sayısal değer

Başlangıç Değeri: Tanım yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

border-image-slice özelliği kenarlık resminin kaç dilime bölüneceğini belirler.

Kenar Çizgisi (border)

Yapısı: border: <deger>

Aldığı Değerler: <border-width> | <border-style> | <renk>

Başlangıç Değeri: Tanımlama yok

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

div
{
   border: solid 5px red;
}

border yukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır.

CSS border özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: