Css Border Kullanımı

Merhaba Arkadaşlar,
Bu makalede 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-styledeğerlerini ise farklı vererek tüm style değerlerini inceleyelim.

css-dersleri-border-kullanimi-1

Ş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.

css-dersleri-border-kullanimi-2

Border özelliği ile bu 3 özelliği birlikte kullanabilirsiniz.Yani,

border: border-width border-style border-color; şeklinde yazabiliriz.Yukardaki örneği border özelliği ile kullanmak istersek şu şekilde yazabiliriz :

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-styledeğerini ise 4 farklı şekilde verip sonucu inceleyelim,

css-dersleri-border-kullanimi-3

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,

css-dersleri-border-kullanimi-4

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 4 – Background Kullanımı

Sonraki : Css Dersleri 6 – Margin Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +