CSS border-color özelliği

Tanım ve Kullanım

border-color özelliği, dört çerçevenin rengini ayarlar. Bu özellik 1 ila 4 renk ayarlayabilir.

border-color özelliği, bir elemanın tüm çerçevelerinin görünür kısmının rengini ayarlamak veya dört çerçeveye farklı renkler ayarlamak için kısa bir özelliktir. Aşağıdaki örneği görün:

Örnek 1

border-color:red green blue pink;
  • Üst kenar çizgisi kırmızı
  • Sağ çerçeve yeşil renktedir
  • Alt kenar çizgisi mavi
  • Sol kenar çizgisi pembe

Örnek 2

border-color:red green blue;
  • Üst kenar çizgisi kırmızı
  • Sağ ve sol kenar çizgileri yeşildir
  • Alt kenar çizgisi mavi

Örnek 3

border-color:dotted red green;
  • Üst ve alt kenar çizgileri kırmızıdır
  • Sağ ve sol kenar çizgileri yeşildir

Örnek 4

border-color:red;
  • 4 adet kenar çizgi tümü kırmızıdır

Unutmayın, kenar çizgi tarzı none veya hidden olmamalı, aksi takdirde kenar çizgi görünmeyecektir.

Açıklama:Her zaman border-style özniteliklerini border-color özniteliklerinden önce belirtin. Element, rengi değiştirmeden önce kenar çizgisini almalıdır.

Ayrıca Bakınız:

CSS Eğitimleri:CSS Kenar

HTML DOM Referans Kılavuzu:borderColor Öznitelik

Örnek

4 adet kenar çizgisinin rengini ayarlama:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Kişisel Deneyim

CSS Dilbilgisi

border-color: color|transparent|initial|inherit;

Öznitelik Değeri

Değer Açıklama
color_name Renk adı olan renk değerinin kenar çizgi rengini tanımlar (örneğin red).
hex_number Onaltılık değerli renk değerinin kenar çizgi rengini tanımlar (örneğin #ff0000).
rgb_number rgb kodu olan renk değerinin kenar çizgi rengini tanımlar (örneğin rgb(255,0,0)).
transparent Öntanımlı Değer. Kenar çizgi rengi şeffaftır.
inherit Anavatere elementten kenar çizgi rengi almayı tanımlar.

Teknik Açıklamalar

Öntanımlı Değer: belirtilmemiş
Devralabilirlik: hayır
Sürüm: CSS1
JavaScript Dilbilgisi: object.style.borderColor="#FF0000 blue"

Daha fazla örnek

Dört kenar çizgisinin rengini ayarlama
Bu örnek, dört kenar çizgisinin rengini nasıl ayarlayacağınızı gösterir. Bir ila dört renk ayarlanabilir.

Tarayıcı Desteği

Tabloda, bu öznitelik için tamamen desteklenen ilk tarayıcı sürüm numaraları belirtilmiştir.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Açıklama:Internet Explorer 6 (ve daha eski sürümler) "transparent" öznitelik değerini desteklememektedir.

Açıklama:IE7 ve daha eski tarayıcılar "inherit" değeri desteklememektedir. IE8 için !DOCTYPE gereklidir. IE9 "inherit" desteklemektedir.