Css Border Özellikleri Ders 11
Merhaba,
Bu dersimizde border yani kenarlık çizgilerini görselleştirme üzerine çalışacağız. İşleyeceğimiz konular sırası ile ;
- Border Sitili
- Border Kalınlığı
- Border Rengi
- Border Yeri
Border Sitili ;
Bir elementin çevresine kenarlık çizmek için her zaman yaptığımız gibi o elementi tanıtmak ve hemen devamına kod olarak border-style etiketini kullanmamız gerekmektedir.
Örn :
1 2 3 4 5 |
P { Border-style : solid; } |
Sitil olarak kullanabileceğimiz yapılar ;
- None : border yok
- Dotted: noktalı
- Dashed: kısa çizgili
- Solid : tek çizgi
- Double : çift çizgi
- Groove: 3d yukarı gölgeli
- Ridge : 3d aşağı gölgeli
- İnset : 3d içe gölgeli
- Outset : 3d dışa gölgeli
Border Kalınlığı ;
Border kalınlığı için border-width özelliği kullanılmaktadır.
Örn :
1 2 3 4 5 |
P {border-width=2px; Border-style: solid; } |
Burada unutulmaması gereken border width özelliği kullanılırken asla tek başına kullanılmaz illaki border-style özelliğinin kullanılması gerekmektedir.
Border Rengi;
Border lara renk vermek için kullanılan özellikltir. Kullanım şekli gayet basittir.
1 2 3 4 5 |
P { Border-color : red; } |
Border Yeri;
Elementimizin neresinde border olmasını istiyor isek border özelliğini ona göre yazabiliriz. Örn ;
1 2 3 4 5 6 7 8 9 |
P { Border-top-style : solid; Border-color: red; Border-width:2px; } |
Artık elementlerimizin kenarlıklarını isteğimiz şekilde düzenleyebileceğiz.
İyi Günler Dilerim,
Cevapla
Want to join the discussion?Feel free to contribute!