Properti warna perbatasan CSS
Contoh
Mengatur warna untuk perbatasan:
div {border-color: coral;}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti border-color
menetapkan warna dari empat batas elemen. Properti ini dapat memiliki satu hingga empat nilai.
Jika properti border-color memiliki empat nilai:
- perbatasan-warna: merah hijau biru merah muda;
- batas atas berwarna merah
- batas kanan berwarna hijau
- batas bawah berwarna biru
- batas kiri berwarna merah muda
Jika properti border-color memiliki tiga nilai:
- warna batas: merah hijau biru;
- batas atas berwarna merah
- batas kanan dan kiri berwarna hijau
- batas bawah berwarna biru
Jika properti border-color memiliki dua nilai:
- warna batas: merah hijau;
- batas atas dan bawah berwarna merah
- batas kanan dan kiri berwarna hijau
Jika properti border-color memiliki satu nilai:
- perbatasan-warna: merah;
- keempat perbatasan berwarna merah
Catatan: Selalu deklarasikan properti bergaya perbatasan sebelum border-color
properti. Elemen harus memiliki batas sebelum Anda dapat mengubah warna.
Nilai bawaan: | Warna elemen saat ini |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | CSS1 |
Sintaks JavaScript: | objek .style.borderColor="#FF0000 biru" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
border-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Sintaks CSS
border-color: color|transparent|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
color | Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element | |
transparent | Specifies that the border color should be transparent | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Tetapkan warna untuk perbatasan dengan nilai HEX:
div {border-color: #92a8d1;}
Contoh
Atur warna untuk perbatasan dengan nilai RGB:
div {border-color: rgb(201, 76, 76);}
Contoh
Atur warna untuk perbatasan dengan nilai RGBA:
div {border-color: rgba(201, 76, 76, 0.3);}
Contoh
Tetapkan warna untuk perbatasan dengan nilai HSL:
div {border-color: hsl(89, 43%, 51%);}
Contoh
Tetapkan warna untuk perbatasan dengan nilai HSLA:
div {border-color: hsla(89, 43%, 51%, 0.3);}
Contoh
Tetapkan warna batas yang berbeda untuk setiap sisi elemen:
div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color:
#ff0000 #00ff00 #0000ff rgb(250,0,255);}
Halaman Terkait
Tutorial CSS: Perbatasan CSS
Referensi DOM HTML: properti borderColor