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:


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

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

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


zekican 09/01/2019

Border'ın alt kenar uzunluğu 100 pixel olsun, 20 px aralıklarla farklı renkler tanımlayabilir miyiz ? 20xp mavi 20 pixel saiyah 20 xp beyaz 20px sarı 20px kırmızı gibi toplamda yüz olunca tekrar edecek şekilde bri tanımlama var mı ?

yönrtici 10/01/2019

Zekican, Böyle bir tanımlama yok. Ancak şöyle yaparsın 100px div etiketi oluştur. içinede 20px 5 adet div oluştur. Bunların alt kenarları istediğin renkte border verebilirsin.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5391

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML RESME 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.