CSS BORDER(KENARLIK)

Css border(kenar) çizgisi özellikleri ile kenar çizgisinin biçemini, rengini ve kalınlığını ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz. Bu özellikler şunlardır.

• border-style(Kenar çizgi biçemi)
• border-top-style(üst kenar çizgi biçemi)
• border-right-style(sağ kenar biçemi)
• border-bottom-style(alt kenar çizgi biçemi)
• border-left-style(sol kenar biçemi)
• border-width(Kenar çizgi genişliği-kalınlığı)
• border-top-width(üst kenar çizgi genişliği)
• border-right-width(sağ kenar çizgi genişliği)
• border-bottom-width(alt kenar çizgi genişliği)
• border-left-width(sol kenar çizgi genişliği)
• border-color(Kenar çizgi rengi)
• border-top-color(üst kenar çizgi rengi)
• border-right-color(sağ kenar çizgi rengi)
• border-bottom-color(alt kenar çizgi rengi))
• border-left-color(sol kenar çizgi rengi)
• border(Kısaltma işlemleri için kullanılır)

CSS KENAR ÇİZGİ BİÇEMİ

Kenar çizginin nasıl olacağını (noktalı,kesik kesik,düz,çift, vb.) belirler Herhangi bir değer yazılmadığı zaman none varsayılan olarak geçerlidir. Aşağıdaki değerleri alabilir.

Örnek olarak üst ve alt kenar için düz; sağ sol kenarlar için çift çizgi biçemini uygulayalım.

CSS:

.kutu{width:500px;

      height:30px;

      border-top-style:solid;

      border-bottom-style:solid;

      border-left-style:double;

      border-right-style:double;

     }

HTML:

<div class="kutu"></div>

ÇIKTI:

yaptığımız örneğin kısaltılmış halini yazalım. Dört değer olduğu için (üst,sağ,alt ve sol) şu şekilde olmalıdır.

.kutu {border-style:solid double solid double}

CSS BORDER (KENAR) ÇİZGİ GENİŞLİĞİ

"border-width" özelliği kenar çizgisinin genişliğini(kalınlığını) ayarlamak için kullanılır. Genişliği ayarlamak için piksel(px) olarak verilebilir veya aşağıda değerleri kullanabiliriz.

• Thin(ince)
• medium(orta)
• thick(kalın)

Örnek:

CSS:

.kutu{width:500px;

      height:30px;

      border-style:solid double solid double;

      border-top-width:5px;

      border-bottom-width:5px;

      border-left-width:5px;

      border-right-width:5px;

      }

HTML:

<div class="kutu"></div>

ÇIKTI:

Border-width özelliğini kısaltılmış yazalım.

• border-width:2px 4px 5px 8px;(üst 2px, sağ 4px, alt 5px, sol 8px olur.)
• border-width:2px 5px 7px;(üst 2px, sağ ve sol 5px, alt 7px olur.)
• border-width:2px 5px;(üst ve alt 2px, sağ ve sol 5px olur.)
• border width:2px(Tüm kenar çizgisi genişlikleri 2px olur.)

Şimdi en son yaptığımız örneği kısaltılmış halde yazalım.

CSS:

.kutu{width:500px;

      height:30px;

      border-style:solid double solid double;

      border-width:5px;

      }

CSS BORDER (KENAR) ÇİZGİSİ RENGİ

"border-color" özelliği, kenar çizgisine renk vermek için kullanılır. Kenarların hepsine birden renk verebileceğimiz gibi tek tek de renk verebiliriz.

.kutu{border-style:solid;
      
      border-color:blue;

      }

Her kenarı ayrı ayrı ele alalım; üst ve alt kenar rengi #ff600; sağ ve sol kenar rengi #00cc00, biçemi düz çizgi ve genişliği 5 piksel olsun.

CSS:

.kutu{width:500px;

      height:30px;

      border-style:solid;

      border-width:5px;

      border-top-color:#ff6600;

      border-left-color:#00cc00;

      border-right-color:#00cc00;

      border-bottom-color:#ff6600;

     }

ÇIKTI:

Şimdi border renk özelliğinin kısa yazılış şekline bakalım.

• border-color:#ff6600 #00cc00 #ff6600 #00cc00; ( üst #ff6600, sağ #00cc00, alt #ff6600 sol #ff6600)
• border-color:#ff6600 #00cc #ccc; (üst #ff6600, sağ ve sol #00cc00, alt #ccc;)
• border-color:#ff6600 #00cc00; (üst ve alt #ff6600, sağ ve sol #00cc00)
• border-color:#ff6600; (Tüm kenar çizgi renkleri #ff6600 olur.)

Şimdi de en son yaptığımız örneğin kısaltılmış halini yazalım.

.kutu{width:500px;

      height:30px;

      border-style:solid;

      border-width:5px;

      border-color:#ff6600 #00cc00;
	 
     }

CSS BORDER(KENAR) ÇİZGİSİ TÜM ÖZELLİKLERİ İÇİN KISALTMA

Kenar çizgisinin biçemi, rengi ve kalınlığını tek seferde biçimlendirmek için "border" özelliğini kullanmamız yeterlidir.

ÖRNEK:

Kenar çizgi genişliği 1px, düz ve rengi de #ff6600 olsun.

.kutu{
      border:1px solid #ff6600;
     }

.kutu{width:300px;

      height:50px; }