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
