Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Warna Batas HTML Menggunakan borderColor Style DOM

Properti Style borderColor DOM pada HTML digunakan untuk menentukan warna dari elemen border. Properti borderColor juga bisa diberikan secara eksplisit berupa turunan dari parent-nya atau dari nilai default.

4 Value Properti borderColor Style DOM pada HTML
Ilustrasi borderColor HTML

Sebelum memahami lebih dalam materi tentang Mengatur Warna Batas HTML Menggunakan borderColor Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Border HTML Menggunakan borderCollapse Style DOM [klik], Mengatur Lebar Batas Bawah HTML Menggunakan borderBottomWidth Style DOM [klik], dan Mengatur Batas Bawah HTML Menggunakan borderBottomStyle DOM [klik].

Sintak:
  • Untuk mendapatkan properti borderColor: object.style.borderColor
  • Untuk mengatur properti borderColor: object.style.borderColor = "color|transparent|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan warna dari sebuah border.

Baca Juga:

Property Value:
  • color: digunakan untuk menentukan warna border yang berkoresponden dengan elemen, dengan nilai default adalah warna hitam.
  • transparent: digunakan untuk mengatur warna border yang berkoresponden dengan elemen ke transparent.
  • inherit: jika tidak terdapat nilai spesifik dari bidang ini, maka akan diturunkan nilai dari elemen parent, dan jika tidak terdapat parent maka nilai root akan digunakan sebagai nilai initial(atau nilai default).
  • initial: digunakan untuk menerapkan nilai initial(atau nilai default) dari sebuah properti ke suatu elemen. Nilai initial tersebut harus tidak memberikan kebingungan oleh nilai spesifik dari browser style sheet. Ketika properti borderColor diatur ke nilai initial, maka nilai yang akan muncul adalah warna hitam yang merupakan nilai default.

Sintak: borderColor: "red";

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MKN1_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MKN1_Function()">

Ubah warna border

</button>

 

<div 

id="MKN1_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MKN1_Function() 

{

document.getElementById("MKN1_Div")

.style.borderColor = "green";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan



Sintak: borderColor: "red green";

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MNN2_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MNN2_Function()">

Ubah warna border

</button>

 

<div 

id="MNN2_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MNN2_Function() 

{

document.getElementById("MNN2_Div")

.style.borderColor = "red green";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan



Sintak: borderColor: "red green blue";

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MBB3_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MBB3_Function()">

Ubah warna border

</button>

 

<div 

id="MBB3_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MBB3_Function() 

{

document.getElementById("MBB3_Div")

.style.borderColor = "red green blue";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan



Sintak: borderColor: "red green blue orange";

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MKK4_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MKK4_Function()">

Ubah warna border

</button>

 

<div 

id="MKK4_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MKK4_Function() 

{

document.getElementById("MKK4_Div")

.style.borderColor = "red green blue orange";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan



Sintak: borderColor = "transparent"

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MKN5_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MKN5_Function()">

Warna Border Transparent

</button>

 

<div 

id="MKN5_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MKN5_Function() 

{

document.getElementById("MKN5_Div")

.style.borderColor = "transparent";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan


Artikel ini didedikasikan kepada: Geiska Agli Natasha Putri, Ghazi Dzulfikar Putra Bagus, Gilar Dwiki Yoga, Gladiza Cahyandaru Hakiki, dan Hanityo Rizky Pratama Widodo.

5 komentar untuk "Mengatur Warna Batas HTML Menggunakan borderColor Style DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderColor Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderColor Style DOM pada HTML:
      1. Google Chrome 1.0
      2. Internet Explorer 4.0
      3. Mozilla firefox 1.0
      4. Opera 3.5
      5. Safari 1.0

      Hapus
  2. Apa yang dimaksud dengan properti bordercolor style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti borderColor Style DOM pada HTMl merupakan properti sytle yang dapat digunakan untuk mengatur atau mengembalikan nilai warna batas dari suatu elemen.

      Hapus
    2. Pengguna dapat menemukan informasi warna yang lebih banyak mengenai properti borderColor jika warna yang diterapkan tersebut digunakan bersamaan dengan CSS.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -