Xüsusiyyət border-color

Xüsusiyyət border-color butun tərəflər üçün eyni vaxtda və ya hər tərəf üçün ayrı-ayrılıqda çərçivə rəngi təyin edir. Xüsusiyyətin dəyəri kimi istənilən rəng vahidləri istifadə edilə bilər. Susmaya görə dəyər: blokun mətn rəngi ilə eyni.

Xüsusiyyət aşağıdakı xüsusiyyətlər üçün qısaldılmış xüsusiyyətdir: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaksis

cssselektor {
  border-color: rəng;
}

Dəyərlərin sayı

Xüsusiyyət 1, 2, 3 və ya 4 sayda dəyər qəbul edə bilər, dəyərlər boşluqla ayrılır:

Nümunə

Gəlin blokun çərçivəsini qırmızı rəngə boyayaq:

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

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

Результат:

Nümunə

Üst və alt tərəflər üçün qırmızı, sağ və sol tərəflər üçün mavi çərçivə təyin edək:

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

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

Результат:

Nümunə

Üst tərəf üçün qırmızı, sağ tərəf üçün mavi, alt tərəf üçün yaşıl, sol tərəf üçün qara çərçivə təyin edək:

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

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

Результат:

Nümunə

Eyni vaxtda müxtəlif qalınlıq, tip və çərçivə rəngi təyin edək:

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

Результат:

Nümunə

Əgər çərçivə rəngi border-color-də təyin edilməyibsə - o, color xüsusiyyətindən götürüləcək:

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

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

Результат:

Həmçinin bax