Her HTML elementin sahip olduğu bir kenarlığı (Border) mevcuttur. Siz onu biçimlendirmediğiniz sürece görülmez.
CSS Border özelliği, bir HTML öğesinin kenarlık stilini, genişliğini ve rengini belirtmenizi sağlar.
border-style Özelliği
border-style özelliği kenar çizgisinin dolgu stilini belirlemenizi sağlar. Aşağıda bu özellikler kısaca gösterilmiştir.
- dotted – Noktalı çizgiye sahip kenarlığı tanımlar
- dashed – Kesik çizgili kenarlığı tanımlar
- solid – Düz bir sınır tanımlar
- double – Çift çizgili kenarlığı tanımlar
- groove – Oluklu bir kenarlığı tanımlar. Etkisi kenar renk değerine bağlıdır.
- ridge – 3 boyutlu etkiye sahip düzleştirilmiş bir sınır tanımlar. Etkisi kenar renk değerine bağlıdır.
- inset – 3 boyutlu etkiye sahip iç bükey kenar çizgisi tanımlar. Etkisi kenar renk değerine bağlıdır.
- outset – 3 boyutlu etkiye sahip dış bükey kenar çizgisi tanımlar. Etkisi kenar renk değerine bağlıdır.
- none – Herhangi bir kenar tanımlamaz
- hidden – Gizli bir kenarlığı tanımlar
Örnek bir uygulama;
Aşağıda <p> etiketine uygulanmış farklı kenar stillerini görebileceğiniz bir örnek uygulama gösterilmiştir.
|
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> <meta charset="utf-8"> <meta name="description" content="CSS Border (Kenarlılık)"> <title>CSS Dersler 4</title> </head> <style> p.p1 {border-style: dotted;} p.p2 {border-style: dashed;} p.p3 {border-style: solid;} p.p4 {border-style: double;} p.p5 {border-style: groove;} p.p6 {border-style: ridge;} p.p7 {border-style: inset;} p.p8 {border-style: outset;} p.p9 {border-style: none;} p.p10 {border-style: hidden;} p.p11 {border-style: dotted dashed solid double;} </style> <body> <h1>border-Style Özelliği</h1> <p class="p1">dotted stilinde kenar.</p> <p class="p2">dashed stilinde kenar.</p> <p class="p3">solid stilinde kenar.</p> <p class="p4">double stilinde kenar.</p> <p class="p5">groove stilinde kenar.</p> <p class="p6">ridge stilinde kenar.</p> <p class="p7">inset stilinde kenar.</p> <p class="p8">outset stilinde border.</p> <p class="p9">kenar yok.</p> <p class="p10">gizli border.</p> <p class="p11">karışık düzenlenmiş kenarlar.</p> </body> </html> |
Ayrı ayrı kenarlara farklı stillerde uygulayabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <style> p { border-top-style: dotted; border-right-style: solid; border-bottom-style: double; border-left-style: dashed; } </style> </head> <body> <p>Kernarları farklı stilde olan bir paragraf</p> </body> </html> |
Peki, işler nasıl işliyor:
Eğer border-style özelliğine dört değer birden verilirse;
|
1 2 3 |
border-style : solid doshed dotted groove ; |
- üst kenar “solid”
- sağ kenarlık “dashed”
- alt sınır “dotted”
- sol sınır “groove” olarak tayin edilir.
Eğer border-style özelliğine üç değer verilirse;
|
1 2 3 |
border-style : solid dashed groove ; |
- üst kenar “solid”
- sağ ve sol kenarlar”dashed”
- alt kenar “groove”
Eğer border-style özellik iki değer verilirse;
|
1 2 3 |
border-style : solid groove ; |
- üst ve alt sınırlar “solid”
- sağ ve sol kenarlıklar “groove”
Eğer border-style özellik bir değeri varsa;
|
1 2 3 |
border-style : solid ; |
- dört kenarın hepsi “solid”
şeklinde stil tayin edilmiş kabul edilir. Bu durum border-width ve border-color için de geçerlidir.
border-width Özelliği
border-width özelliği kenar çizgisinin kalınlığını (genişliğini) belirlemenizi sağlar. Çizgi kalınlığını (px, pt, cm, em vb…) türünden ölçülerle ifade edebilirsiniz. Tek değer vermeniz durumunda tüm çevre çizgi kalınlığını ifade etmiş olursunuz. Ayrı çizgi kalınlığı için 4 ayrı değerde verebilirsiniz. Bu durumda vermiş olduğunuz ölçüler sırayla üst, sağ, alt ve sol kenar taraflarının ölçüleri olacak şekilde tayin edilmiş olacaktır.
Aşağıda border-width CSS özelliğinin kullanımını inceleyebilirsiniz.
|
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 |
<!DOCTYPE html> <html> <head> <style> p{ border-style: solid; } p.bir { border-width: 5px; } p.iki { border-width: medium; } p.uc { border-width: 2px; } p.dort { border-width: thick; } p.bes { border-width: 2px 10px 4px 20px; } </style> </head> <body> <h2>border-width Özelliği</h2> <p class="bir">Çizgi kalınlığım 10 px değerindedir.</p> <p class="iki">Medium çizgi kalınlığına sahibim.</p> <p class="uc">Çizgi kalınlığım 2 px değerindedir.</p> <p class="dort">Thick çizgi kalınlığına sahibim.</p> <p class="bes">Her kenar farklı ölçüdedir.</p> </body> </html> |
border-color Özelliği
border-color özelliği kenarların rengini tayin eder.
CSS ile bir renk seçimini, genellikle aşağıdakiler şekillerden biri ile belirleyebilirsiniz.
- geçerli bir renk adı – “red” gibi
- bir Hex değeri – “# ff0000” gibi
- bir RGB değeri – “rgb (255,0,0)” gibi
Ö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 |
<!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>border-color Özelliği</h2> <p class="bir">Bu paragrafın kırmızı kenarları var</p> <p class="iki">Bu paragrafın yeşil kenarları var</p> <p class="uc">Farklı renklere sahip kenarları olan bir paragraf</p> </body> </html> |
border Özelliği
Yukarıdaki örneklerden de görebileceğiniz gibi, kenarlar ile uğraşırken göz önüne alınması gereken birçok özellik vardır. Kodu kısaltmak için, tek bir “border” özelliğinde tüm bireysel kenarlık özelliklerini toplamakta mümkündür.
border özelliği sırayla ;
- border-width
- border-style
- border-color özelikleri için bir kestirme niteliktir
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <style> p { border: 5px solid red; } </style> </head> <body> <h2>border Özeliği</h2> <p>5 piksel düz çizgili kırmızı renkli kenarları olan bir paragraf.</p> </body> </html> |
Örnek;
Ayrıca, tek taraf için tüm bireysel kenarlık özelliklerini belirtebilirsiniz;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> p { border-left: 6px solid red; background-color: lightgrey; } </style> </head> <body> <h2>border Özelliği</h2> <p>Sol kenarı 6px kalınlığında düz bir hattı olan kırmızı ve arka plan rengi olan bir paragraf</p> </body> </html> |
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> p { border-bottom: 6px solid red; background-color: lightgrey; } </style> </head> <body> <h2>border Özelliği</h2> <p>Alt kenarı 6px kalınlığında düz bir hattı olan kırmızı ve arka plan rengi olan bir paragraf</p> </body> </html> |
border-radius Özelliği
border-radius özelliği kenarları yuvarlatmak için kullanılır.
Örnek;
Aşağıdaki örnekte <p> elementine uygulanmış birbirinden farklı değerler ile köşeleri yuvarlatılmış kenar stilleri görebilirsiniz.
|
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 |
<!DOCTYPE html> <html> <head> <style> p.normal { border: 2px solid blue; } p.round1 { border: 2px solid red; border-radius: 5px; } p.round2 { border: 2px solid yellow; border-radius: 8px; } p.round3 { border: 2px solid green; border-radius: 12px; } </style> </head> <body> <h2>border-radius Özelliği</h2> <p class="normal">Normal Kenar</p> <p class="round1">Yuvarlatılmış kenarlar</p> <p class="round2">Yuvarlatılmış kenarlar</p> <p class="round3">Yuvarlatılmış kenarlar</p> </body> </html> |
[…] CSS Kenarlıklar (Border) Özellikleri […]