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.

Kürşad Erdoğan 24/10/2020

Merhabalar çizginin uzunluk veya kısalığını nasıl ayarlayabilirim?

yönetici 27/10/2020

Kürşad, uzunlukve kısalık width değeri ile yükseklik height değeri ile ayarlanır.

.kutu{width:300px;

      height:50px; }


        

Sercan 30/10/2020

Merhaba. Kenarlığı sadece yazının olduğu kısımı çevreleyecek şekilde, yani baştan sona kadar değilde merkezde yazı ve etrafında kenarlık olacak şekilde yazabilir miyim?

yönetici 31/10/2020

Sercan, parağrafdaki yazını span etiketi ile yaz ve span etikete border ver.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

365

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.