CSS kenarlığı, HTML bileşenlerinin etrafındaki kenarlıkları karakterize etmek ve biçimlendirmek için kullanılan önemli bir özelliktir. Kenarlıklar, web sitesi kompozisyonunda hayati bir rol üstlenir ve ayırma, vurgu ve şık çekicilik yaratmaya yardımcı olur. CSS'de, bu kenarlıkların stilini, çeşitliliğini, boyutunu ve şeklini kontrol etmek için kenarlıkla ilgili birkaç özellikten yararlanabilirsiniz. Bu makalede, bu CSS kenarlık özelliklerini ve bunların gerçekten nasıl kullanılacağını araştıracağız.
CSS Kenarlık Özellikleri
CSS kenarlık özellikleri, bir bileşenin kenarlarının stilini, çeşitliliğini, genişliğini ve gelgitlerini belirlemek için kullanılır. Bu özellikler şunları içerir:
c'deki işaretçiler
- kenar stili
- sınır rengi
- kenar genişliği
- sınır yarıçapı
1) CSS kenar stili
Kenarlık stili özelliği, web sayfasında görüntülemek istediğiniz kenarlık türünü belirtmek için kullanılır.
Kenarlığı tanımlamak için border-style özelliğiyle birlikte kullanılan bazı border stili değerleri vardır.
| Değer | Tanım |
|---|---|
| hiçbiri | Herhangi bir sınır tanımlamaz. |
| noktalı | Noktalı kenarlığı tanımlamak için kullanılır. |
| kesikli | Kesikli kenarlığı tanımlamak için kullanılır. |
| sağlam | Katı bir kenarlık tanımlamak için kullanılır. |
| çift | Aynı kenar genişliği değerine sahip iki kenarlık tanımlar. |
| oluk | 3 boyutlu yivli bir kenarlığı tanımlar. efekt kenarlık rengi değerine göre oluşturulur. |
| çıkıntı | 3 boyutlu çıkıntılı bir kenarlığı tanımlar. efekt kenarlık rengi değerine göre oluşturulur. |
| ek | 3 boyutlu bir iç kenarlığı tanımlar. efekt kenarlık rengi değerine göre oluşturulur. |
| başlangıç | 3 boyutlu bir başlangıç sınırını tanımlar. efekt kenarlık rengi değerine göre oluşturulur. |
Örnek:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Çıktı:
Ağ ve Internet
2) CSS kenar genişliği
Border-width özelliği kenarlığın genişliğini ayarlamak için kullanılır. Piksel cinsinden ayarlanır. Kenarlığın genişliğini ayarlamak için ince, orta veya kalın olmak üzere önceden tanımlanmış üç değerden birini de kullanabilirsiniz.
Not: border-width özelliği tek başına kullanılmaz. Kenarlığın işe yaramayacağı şekilde ilk önce ayarlanması için 'border-style' özelliği gibi diğer kenarlık özellikleriyle sürekli olarak kullanılır.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Çıktı:
3) CSS kenar rengi
Kenarlığın rengini ayarlamak için üç strateji vardır.
- Name : Rengin ismini belirler. Örneğin: 'kırmızı'.
- RGB: Rengin RGB değerini belirler. Örneğin: 'rgb(255,0,0)'.
- Hex: Rengin hex değerini belirler. Örneğin: '#ff0000'.
Not: border-color özelliği tek başına kullanılmaz. Kenarlığın işe yaramayacağı şekilde ilk önce ayarlanması için 'border-style' özelliği gibi diğer kenarlık özellikleriyle sürekli olarak kullanılır.
Örnek:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Çıktı:
