Atribut border-color CSS

definisi dan penggunaan

Properti border-color menetapkan warna empat garis batas. Properti ini dapat menetapkan 1 sampai 4 jenis warna.

properti border-color adalah properti singkat yang dapat menetapkan warna bagian yang terlihat dari semua garis batas elemen, atau menetapkan warna yang berbeda untuk 4 garis. Lihat contoh di bawah ini:

contoh 1

border-color:red green blue pink;
  • Garis atas adalah merah
  • batas kanan adalah biru
  • Garis bawah adalah biru
  • Garis kiri adalah merah jambu

Contoh 2

border-color:red green blue;
  • Garis atas adalah merah
  • Garis kanan dan kiri adalah hijau
  • Garis bawah adalah biru

Contoh 3

border-color:dotted red green;
  • Garis atas dan bawah adalah merah
  • Garis kanan dan kiri adalah hijau

Contoh 4

border-color:red;
  • Semua empat garis adalah merah

Ingat, gaya garis tidak boleh none atau hidden, atau garis tidak akan muncul.

Keterangan:Selalu tampilkan atribut border-style sebelum border-color. Elemen harus mendapatkan garis sebelum mengubah warna.

Lihat Juga:

Panduan CSS:Batas CSS

Panduan Referensi HTML DOM:Atribut borderColor

Contoh

Atur warna empat garis:

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

Coba Sendiri

Sintaksu CSS

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

Nilai Atribut

Nilai Deskripsi
color_name Ditetapkan warna garis dengan nama warna (contoh red).
hex_number Ditetapkan warna garis dengan nilai heksadesimal (contoh #ff0000).
rgb_number Ditetapkan warna garis dengan kode rgb (contoh rgb(255,0,0)).
transparent Nilai Default. Warna garis transparen.
inherit Ditetapkan bahwa warna garis harus diwariskan dari elemen induk.

Detil Teknik

Nilai Default: not specified
Inheritance: no
Versi: CSS1
Sintaksu JavaScript: object.style.borderColor="#FF0000 blue"

Contoh lebih banyak

Mengatur warna empat garis
Contoh ini menunjukkan bagaimana mengatur warna empat garis. Dapat diatur warna satu hingga empat.

Dukungan peramban

Angka di tabel mengindikasikan versi peramban pertama yang mendukung atribut ini penuh.

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

Keterangan:Peramban Internet Explorer 6 (dan versi yang lebih awal) tidak mendukung nilai atribut "transparent".

Keterangan:Peramban IE7 dan versi yang lebih awal tidak mendukung nilai "inherit". IE8 memerlukan !DOCTYPE. IE9 mendukung "inherit".