Bu yazımda Css’te border özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz. Border özelliği ile html etiketlerine kenarlıklar verebiliriz. Kenarlık tanımlarken bizden 3 değer istenir. Bunlar;
1 border-width : Bu özellik ile etiketin kenarlık kalınlığını px, pt, cm, em, vb.. ile belirleyebiliriz.
2 border-color : Bu özellik ile etiketin kenarlık rengini belirleyebiliriz.
3 border-style : Bu özellik ile etiketin kenarlık stilini belirleyebiliriz. Kenar stilini belirlerken aşağıdaki değerleri kullanabiliriz
► dotted
► dashed
► solid
► double
► groove
► ridge
► inset
► outset
► none
► hidden
Şimdi <p> etiketleri tanımlayalım ve hepsine farklı farklı border-style değerleri verelim.
Tüm etiketlerin border-width değeri 4px, border-color değeri cornflowerblue olsun.
border-style değerlerini ise farklı vererek tüm style değerlerini inceleyelim.
Şimdi bir <p> etiketi tanımlayalım ve üç özelliği kullanarak 10px kalınlığında, kırmızı renkli, düz bir kenarlık verelim.
|
1 2 3 4 5 6 7 8 9 |
<style> border-style : solid; // Kenarlık stili solid yani düz çizgi border-width : 10px; // Kenarlık kalınlığı 10px border-color : red; // Kenarlık rengi kırmızı </style> <p>10px kalınlığında, kırmızı renkli, düz bir kenarlık verildi.</p> |
Border özelliği ile bu 3 özelliği birlikte kullanabilirsiniz. Yani;
|
1 2 3 |
border: border-width border-style border-color; |
şeklinde yazabiliriz.
Yukardaki örneği border özelliği ile kullanmak istersek şu şekilde yazabiliriz;
|
1 2 3 |
border:10px solid red; |
Gördüğünüz gibi yazdığımız değerler etiketlerin her yanına (yukarı, sağ, aşağı, sol ) uygulanıyor. Dilerseniz bunların herbirine farklı değerlerde verebilirsiniz.
Bir <p> etiketi tanımlayalım ve border-width değeri 10px, border-color değeri cornflowerblue olsun.
border-style değerini ise 4 farklı şekilde verip sonucu inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> border-width: 10px; border-color: blue; border-top-style:solid; border-right-style:dotted; border-bottom-style:dashed; border-left-style:double; </style> <p>10px kalınlığında, mavi renkli ve 4 farklı stilli kenarlık.</p> |
Border ile ilgili diğer özellikleride kullanıp sonuçlarını incelerseniz daha anlaşılır olacaktır.
► border
► border-top
► border-right
► border-bottom
► border-left
► border-style
► border-top-style
► border-right-style
► border-bottom-style
► border-left-style
► border-width
► border-top-width
► border-right-width
► border-bottom-width
► border-left-width
► border-color
► border-top-color
► border-right-color
► border-bottom-color
► border-left-color
Son olarak, bir özellik 1, 2, 3 veya 4 değer alabilir.
Şimdi bir <div> etiketi tanımlayalım ve farklı durumlar üzerinden sonuçlarını inceleyelim.
Tüm özellikler için durum aynı olduğundan, border-color üzerinden örneklerimizi yapmamız yeterli olacaktır.
1 border-color : red; => Bu şekilde tek değer verilirse etiketin,
her yanına (yukarı, sağ, aşağı, sol ), red değeri uygulanır.
2 border-color : red blue; => Bu şekilde 2 değer verilirse etiketin,
yukarı ve aşağı değeri, red
sağ ve sol değeri, blue olarak uygulanır.
3 border-color : red blue yellow; => Bu şekilde 3 değer verilirse etiketin,
yukarı değeri, red
sağ ve sol değeri, blue
aşağı değeri, yellow olarak uygulanır.
4 border-color : red blue yellow green; => Bu şekilde 4 değer verilirse etiketin,
yukarı değeri, red
sağ değeri, blue
aşağı değeri, yellow
sol değeri, green olarak uygulanır.
Her bir özelliği sadece bir tarafada (yukarı, sağa, aşağı, sola) uygulayabiliriz.
Örneğin etiketin sadece soluna kenarlık vermek istiyorsak şu şekilde verebiliriz.
|
1 2 3 4 5 6 7 |
<style> border-left:8px solid blue; </style> <p>Etiketin soluna 8px kalınlığında, mavi renkli, düz bir kenarlık uygulandı.</p> |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
