Sifat border-color

Sifat border-color menetapkan warna sempadan untuk semua sisi secara serentak atau secara berasingan untuk setiap sisi. Nilai sifat adalah sebarang unit untuk warna. Nilai lalai: warna sama seperti teks blok.

Sifat adalah sifat-penyingkatan untuk sifat-sifat berikut: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaks

cssselector {
  border-color: warna;
}

Bilangan Nilai

Sifat boleh menerima 1, 2, 3 atau 4 nilai, dinyatakan dengan ruang:

Contoh

Mari warnakan sempadan blok dengan warna merah:

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

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

Результат:

Contoh

Mari tetapkan sempadan merah untuk sisi atas dan bawah dan biru muda untuk sisi kanan dan kiri:

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

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

Результат:

Contoh

Mari tetapkan sempadan merah untuk sisi atas, biru muda untuk kanan, hijau untuk bawah, hitam untuk sisi kiri:

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

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

Результат:

Contoh

Mari tetapkan secara serentak ketebalan berbeza, jenis dan warna sempadan:

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

Результат:

Contoh

Jika warna sempadan tidak ditetapkan dalam border-color - ia akan diambil dari sifat color:

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

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

Результат:

Lihat juga