border-color Özelliği

border-color özelliği, kenarlığın rengini tüm taraflar için aynı anda veya her bir taraf için ayrı ayrı belirler. Özelliğin değeri olarak herhangi bir renk birimi kullanılabilir. Varsayılan değer: bloğun metin rengiyle aynı renk.

Bu özellik, aşağıdaki özellikler için bir kısaltma özelliğidir: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sözdizimi

cssseçici {
  border-color: renk;
}

Değer Sayısı

Özellik, boşlukla ayrılmış olarak 1, 2, 3 veya 4 değer alabilir:

Örnek

Bir bloğun kenarlığını kırmızı renge boyayalım:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Üst ve alt kenarlar için kırmızı, sağ ve sol kenarlar için mavi renk belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red blue;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Üst kenar için kırmızı, sağ kenar için mavi, alt kenar için yeşil, sol kenar için siyah renk belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Aynı anda farklı kalınlık, tip ve kenarlık rengi belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Eğer kenarlık rengi border-color ile belirtilmemişse, color özelliğinden alınacaktır:

html<div id="elem"></div>

css#elem {
  color: red;
  border-style: solid;
  border-width: 2px;
  width: 300px;
  height: 100px;
}

Результат:

Ayrıca Bakınız