CSS’ te kullanılan border özelliği kullanarak bir öğenin kenarlığının stilini, genişliğini ve rengini belirleyebilirsiniz. Kenarlıklara uygulayabileceğiniz biçimler için hangi özellikleri kullanabileceğinizi ve yöntemleri yazının devamında bulacaksınız.
CSS “border-style” Özelliği:
border-style özelliği, görüntülenecek kenarlık türünü belirtir.
Aşağıdaki değerlere izin verilir:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Yukarıdaki border-style özelliğinin alabileceği değerleri inceleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html> <head> <title>tasarimkodlama.com</title> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body> <h2>CSS border-style Özelliği</h2> <p>Bu özellik aşağıdaki değerleri alabilir.</p> <p class="dotted">border-style: dotted;</p> <p class="dashed">border-style: dashed;</p> <p class="solid">border-style: solid;</p> <p class="double">border-style: double;</p> <p class="groove">border-style: groove;</p> <p class="ridge">border-style: ridge;</p> <p class="inset">border-style: inset;</p> <p class="outset">border-style: outset;</p> <p class="none">border-style: none;</p> <p class="hidden">border-style: hidden;</p> <p class="mix">border-style: dotted dashed solid double;</p> </body> </html> |
Ekran Çıktısı:
Not: “border-style” özelliği ayarlanmadıkça, aşağıda açıklanan diğer CSS kenarlık özelliklerinden hiçbiri HERHANGİ bir etkiye sahip olmayacaktır!
CSS “border-width” Özelliği:
Kenarlık genişliği özelliği dört kenarlığa ait genişliğini belirtir. (üst ,sağ ,sol , alt)
Genişlik, belirli bir boyut (px, pt, cm, em, vb.) olarak veya önceden tanımlanmış üç değerden birini kullanarak ayarlanabilir: ince (thin), orta(medium) veya kalın(thick).
border-width özelliğine birkaç farklı şekilde değer verebilirsiniz.
border-width:5px; Bu şekilde bir kullanımda tüm kenarlıkların genişliği (üst, sağ, alt, sol) 5 piksel olacaktır.
border-width:5px 3px; Bu şekilde bir kullanımda üst ve alt kenarlık genişliği 5px, sol ve sağ kenarlık genişliği 3px olacaktır.
border-width:3px 2px 4px 1px; Bu şekilde kullanımda sırasıyla üst, sağ, alt ve sol kenarlık genişliği 3px, 2px,4px ve 1px olacaktır.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html> <head> <style> p.bir { border-style: solid; border-width: 5px; } p.iki { border-style: solid; border-width: medium; } p.uc { border-style: dotted; border-width: 2px; } p.dort { border-style: dotted; border-width: thick; } p.bes { border-style: double; border-width: 15px; } p.alti { border-style: double; border-width: thick; } p.yedi { border-style: solid; border-width: 2px 10px 4px 20px; } </style> </head> <body> <h2>CSS border-width Özelliği</h2> <p>Bu özellik dört kenarlığa ait genişliği ayarlamanıza yardımcı olacaktır.</p> <p class="bir">tasarimkodlama.com</p> <p class="iki">tasarimkodlama.com</p> <p class="uc">tasarimkodlama.com</p> <p class="dort">tasarimkodlama.com</p> <p class="bes">tasarimkodlama.com</p> <p class="alti">tasarimkodlama.com</p> <p class="yedi">tasarimkodlama.com</p> <p><b>Not:</b> "border-width" özelliği tek başına kullanılamaz. Daima "border-style" özelliği ile önecelikle kenarlık stili belirlenmelidir.</p> </body> </html> |
Ekran Çıktısı:
CSS “border-color” Özelliği:
Bu özellik kullanılmadığında varsayılan olarak kenarlık rengi siyahtır. Kenarlık rengini border-color özelliğini kullanarak belirleyebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html> <head> <style> p.bir { border-style: solid; border-color: red; } p.iki { border-style: solid; border-color: green; } p.uc { border-style: solid; border-color: red green blue yellow; } </style> </head> <body> <h2>CSS border-color Özelliği</h2> <p>Bu özellik kullanılarak 4 kenarlık için renk ayarlaması yapabilirsiniz.</p> <p class="bir">Düz ve kırmızı kenarlık</p> <p class="iki">Düz ve yeşil kenarlık.</p> <p class="uc">Düz ve çok renkli kenarlık. Her kenar için ayrı renk ayarlandı.</p> <p><b>Not:</b> Bu özellik tek başına kullanıldığında bir sonuç vermeyecektir. Mutlaka border-style özelliği ile birlikte kullanılmalıdır.</p> </body> </html> |
Ekran Çıktısı:
CSS te border özelliğine ait çeşitli kullanımlarını ve açıklamalarını inceleyin.
1 2 3 4 5 6 7 8 | p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } |
Yukarıdaki CSS kodları paragrafın üst (top) ve alt (bottom) kenarlığını noktalı, sağ (right) ve sol (left) kenarlığını düz olarak ayarlar.
1 2 3 4 5 | p { border-style: dotted solid; } |
Yukarıdaki CSS kodları paragrafın üst ve alt kenarlıklarını noktalı sol ve sağ kenarlıklarını düz çizgi olarak ayarlar.
1 2 3 4 5 | p { border: 5px solid red; } |
Yukarıdaki CSS kodları paragrafın kenarlıklarının tümünü 5px genişliğinde düz çizgi ve kırmızı olarak ayarlayacaktır. Eğer tüm kenarlıklar aynı özellikte olacaksa yukarıdaki biçimlendirmeyi kullanarak daha az kod yazmak mümkün olacaktır.
CSS Kenarlık Köşesi Yuvarlama:
border-radius özelliği kullanarak, bir öğeye yuvarlanmış kenarlıklar ekleyebilirsiniz.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <style> p.normal { border: 2px solid red; } p.round1 { border: 2px solid red; border-radius: 5px; } p.round2 { border: 2px solid red; border-radius: 8px; } p.round3 { border: 2px solid red; border-radius: 12px; } </style> </head> <body> <h2>CSS border-radius Özelliği</h2> <p class="normal">Paragraf 1</p> <p class="round1">Paragraf 2</p> <p class="round2">Paragraf 3</p> <p class="round3">Paragraf 4</p> </body> </html> |
2 Yorum