CSS Border Özelliği

Bir web sayfasında elementleri birbirlerinden ayırmak için genellikle kenarlık tercih edilir.HTML elementlerine kenarlık veya çerçeve oluşturmak için CSS border özelliği kullanılır.

Bu yazıda Border özelliğine ait alt özellikler detaylı bir şekilde açıklanmıştır.

CSS Border Özelliği

CSS border özelliği HTML elementlerinin kenar çizgilerini tanımlamak ve stil (kenar çizgi kalınlığı, rengi ve şekli vermek için kullanılır.

Esasen kenarlıklara biçim vermek için 3 tane border özelliği vardır:
1-Border-color
2-Border-style
3-Border-width

Border-style

Kenar çizgilerinin biçimini(şeklini) belirlemek için border-style özelliği kullanılır.20 tane önceden tanımlı biçim vardır.

Örnek Kullanımı:

p {  
  border-style: dashed;
}

Border-style özelliğinin yönlere özel kullanımı:

  • border-top-style => Sadece üst border
  • border-left-style => Sadece sol border
  • border-bottom-style => Sadece alt border
  • border-right-style => Sadece sağ border

İpucu: border-style yukarıdaki yönlere göre border özelliklerinin kısaltılmış halidir.Bu özellik 1 ile 4 arasında değer alabilir.1 tane değer alırsa -yukardaki örnekte gibi- bu değer bütün kenarlara uygulanır.Eğer 4 değer alırsa her kenara aynı biçim verilmiş olur.
Örnek Kullanımı:

p {  
  border-style: dashed dotted solid double;
                   
}

Border-color

Kenarlıkların rengini belirlemek için border-color özelliği kullanılır.
Örnek Kullanımı:

p {  
  border-color: blue;
}

Border-color özelliğinin yönlere özel kullanımı:

  • border-top-color => Sadece üst border
  • border-left-color => Sadece sol border
  • border-bottom-color => Sadece alt border
  • border-right-color => Sadece sağ border

İpucu: border-color yukarıdaki yönlere göre border özelliklerinin kısaltılmış halidir.Bu özellik 1 ile 4 arasında değer alabilir.1 tane değer alırsa -yukardaki örnekte gibi- bu değer bütün kenarlara uygulanır.Eğer 4 değer alırsa her kenara aynı biçim verilmiş olur.
Örnek Kullanımı:

p {  
  border-color: red green pink black;
                   
}

Border-width

Kenarlıkların kalınlığını belirlemek için border-width özelliği kullanılır.
Örnek Kullanımı:

p {  
  border-width: 2px;
}

Border-width özelliğinin yönlere özel kullanımı:

  • border-top-width => Sadece üst border
  • border-left-width => Sadece sol border
  • border-bottom-width => Sadece alt border
  • border-right-width => Sadece sağ border

İpucu: border-width yukarıdaki yönlere göre border özelliklerinin kısaltılmış halidir.Bu özellik 1 ile 4 arasında değer alabilir.1 tane değer alırsa -yukardaki örnekte gibi- bu değer bütün kenarlara uygulanır.Eğer 4 değer alırsa her kenara aynı biçim verilmiş olur.
Örnek Kullanımı:

p {  
  border-width: 2px 3px 1px 3px;
                   
}

Border – Kısaltılmış Özellik

Aslında yukarıda saydığımız 3 border özelliğinin yönler için kısaltılmış bir özellik olduklarını gördünüz.Sadece border özelliği de bu 3 özelliğin kısaltması olarak kullanılabiliyor.
Örnek Kullanım:

p {  
  border: 2px solid red;        
                   
}

Border-Radius

Normalde elementlere kenarlık (border) verildiğin de bu borderlar köşelidir.CSS3 ile birlikte gelen bu özellik kenarları yuvarlatmak için kullanılır.Sadece kenarlık için değil elemente de verilebilir.
Örnek Kullanım:

p {  
  border-radius: 3px;
                   
}

CSS border özelliği elementlere farklı bir gönüm kazandırmak için oldukça sık kullanılan bir CSS özelliğidir.CSS kutu modeli içerisinde yer alır.Özellikle margin özelliği kullanılmadığı zaman elementleri ayırma görevini üstlenir.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin