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.

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.

css border

Ö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:


Ç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.

Ö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:


ÇIKTI:

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

Ş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:

css border

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

Ş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;
     }

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9213

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.