sınır CSS'de bir öğeye kenarlık eklemek için kullanılan bir kısayol özelliğidir. Kutunun kenarlığını belirlememizi sağlar. Kenarlığın genişliğini, stilini ve rengini ayarlar. Bu CSS özelliği aşağıdaki kenarlık özelliklerini içerir:

kenar genişliği:Border-width özelliği kenarlığın genişliğini ayarlamak için kullanılır. Ayrıca önceden tanımlanmış değerleri de kullanabiliriz. ince, orta, Ve kalın Kenarlığın genişliğini ayarlamak için. Kenarlığın kalınlığını ayarlar. Varsayılan değeri orta .
Bu özellik tek başına kullanılamaz. Kenarlığı ilk olarak ayarlamak için her zaman 'border-style' özelliği gibi diğer kenarlık özellikleriyle birlikte kullanılır; aksi halde çalışmayacaktır.
Kenarlığın genişliği her bir taraf için farklı olabilir. Border-bott-width kullanılarak yapılabilir, kenarlık üst genişliği, kenar sağ genişliği , Ve kenarlık-sol-genişlik .kenar stili:Bu özellik kenarlığın stilini belirtir. Kenarlığın düz, noktalı, kesikli, çift, oluk ve diğer olası değerlerden biri olup olmadığını tanımlar. Bu özelliği ayarlamadan, yani kenarlık stilini ayarlamadan diğer kenarlık özelliklerinin hiçbiri çalışmaz. Kenarlık belirtilmeden görünmez olacaktır. kenar stili . Bunun nedeni, bu CSS özelliğinin varsayılan değerinin hiçbiri .
Benzer kenar genişliği , kenarlığın stili her bir taraf için farklı olabilir. Özellikleri kullanılarak yapılabilir alt kenar stili, üst kenar stili, sağ kenar stili , Ve kenarlık-sol-stili .sınır rengi:Kenarlığın rengini değiştirmemizi sağlar. Rengi, renk adını, RGB değerini veya hex değerini kullanarak ayarlayabiliriz. Benzer kenar genişliği Ve kenar stili , kenarlığın rengini ayrı ayrı değiştirebiliriz, yani bir öğenin kenarlığının alt, üst, sol ve sağ tarafının rengini değiştirebiliriz. Özellikleri kullanılarak yapılabilir kenarlık-alt-renk, kenarlık-üst-renk, kenarlık-sağ-renk , Ve kenarlık-sol-renk .
sınır rengi mülkiyet tek başına kullanılamaz. Kenarlığı ayarlamak için 'border-style' özelliği gibi diğer kenarlık özellikleriyle birlikte kullanılması gerekir; aksi halde çalışmayacaktır.

kenarlık ve anahat

Kenarlıklar ve ana hatlar çok benzer olmasına rağmen, ana hatlar ve kenarlıklar arasında aşağıdaki gibi bazı farklılıklar vardır:

• Anahat kullanarak, bir öğenin dört tarafı için farklı anahat genişliği, stili ve rengi uygulayamayız, oysa kenarlık içinde, sağlanan değeri bir öğenin dört tarafının tamamına uygulayabiliriz.
• Kenarlık, öğenin boyutunun bir parçası iken ana hat, öğenin boyutunun bir parçası değildir. Yani, elemana ne kadar kalın bir taslak uygularsak uygulayalım, boyutları değişmeyecektir.

Border özelliğini anlamak için bir örnek görelim.

Örnek

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} 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.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Çıktı

Şimdi her ikisini de kullandığımız başka bir örnek var. taslak Ve sınır özellikler.

Örnek

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Çıktı