Kenarlik Cizgisi Border Ozellikleri
Kenarlık Çizgisi (Border) ÖzellikleriKenarlık Çizgisi (Border) Özellikleri
Kenar çizgisi, içerik alanı ve kenar iç boşluğu etrafındaki çizgiye denir.
Kenar çizgisinin özellikleri 3 tanedir.. Bunlar border-style, border-width ve border-color'dur.. Sırasıyla bunları görelim..
Kenar Çizgisi Biçimi (border-style)
Kenar çizgisinin biçimini bu özellik ile belirleriz.. Alabileceği 8 değer vardır..
* dotted - düz çizgi
* dashed - noktali çizgi
* solid - kesik çizgi
* double - çift çizgi
* grove, ridge, inset, outset.. ve birde göstermeyeceksek none değeri.
Örnek kullanımı aşağıdaki gibidir;
div {border-style: double}
Her kenar için ayrı atama yapmak istersekde aşağıdaki özellikleri kullanmalıyız..
border-left-style - Sol kenarlık biçimi
border-top-style - Üst kenarlık biçimi
border-right-style - Sağ kenarlık biçimi
border-bottom-style - Alt kenarlık biçimi
Örnek kullanımı aşağıdaki gibidir;
div {border-left-style: solid; border-top-style: dotted; border-right-style: dashed; border-bottom-style: double}
Kenar Çizgisi Genişliği (border-width)
Kenar çizgisinin genişliğini bu özellik ile belirleriz..
Örnek kullanımı aşağıdaki gibidir;
div {border-style: solid; border-width: 5px}
Her kenar için ayrı atama yapmak istersekde aşağıdaki özellikleri kullanmalıyız..
border-left-width - Sol kenarlık genişliği
border-top-width - Üst kenarlık genişliği
border-right-width - Sağ kenarlık genişliği
border-bottom-width - Alt kenarlık genişliği
Örnek kullanımı aşağıdaki gibidir;
div {border-style: solid; border-left-width: 2px; border-top-width: 5px; border-right-width: 10px; border-bottom-width: 15px}
Kenar Çizgisi Rengi (border-color)
Kenar çizgisinin rengini bu özellik ile belirleriz.. Alabileceği değerler (İngilizce renk adları ve RGB değerleridir)
Örnek kullanımı aşağıdaki gibidir;
div {border-style: solid; border-color: red}
Her kenar için ayrı atama yapmak istersekde aşağıdaki özellikleri kullanmalıyız..
border-left-color - Sol kenarlık rengi
border-top-color - Üst kenarlık rengi
border-right-color - Sağ kenarlık rengi
border-bottom-color - Alt kenarlık rengi
Bu 3 özelliği tek bir özellikde yazmak istersek.. Sırasıyla aşağıdaki gibidir..
border-width > border-style > border-color
Örnek kullanımı aşağıdaki gibidir;
div {border: 1px solid red}