Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Batas HTML Menggunakan borderStyle Style DOM

Properti Style borderStyle DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai style border dari elemen.

12 Value Properti borderStyle Style DOM pada HTML
Properti borderStyle DOM

Sebelum memahami lebih dalam materi tentang Mengatur Batas HTML Menggunakan borderStyle Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Spasi HTML Menggunakan borderSpacing Style DOM [klik], Mengatur Lebar Border HTML Menggunakan borderRightWidth Style DOM [klik], dan Mengatur Batas Kanan HTML Menggunakan borderRightStyle DOM [klik].

Sintak:
  • mendapatkan nilai borderStyle: object.style.borderStyle
  • mengatur nilai borderStyle: object.style.borderStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string, yang merepresentasikan style dari elemen border.

Baca Juga:

Property Values: setiap nilai properti diperlihatkan sebagai berikut.
  • none: tidak menciptakan border apapun, yang merupakan nilai default dari properti.
  • hidden: memiliki fungsi visual yang hampir sama dengan value 'none', kecuali digunakan untuk membantuk konflik resolusi border pada elemen table.
  • dotted: penggunaan baris dot sebagai border.
  • dashed: penggunaan baris dashed sebagai border.
  • solid: penggunaan baris solid sebagai border.
  • double: dua baris digunakan sebagai border.
  • groove: menampilkan border 3D grooved, dimana efeknya bergantung pada nilai border-color.
  • ridge: menampilkan border 3D ridged, dimana efeknya bergantung pada nilai border-color.
  • inset: menampilkan border 3D inset, dimana efeknya bergantung pada nilai border-color.
  • outset: menampilkan border 3D outset, dimana efeknya bergantung pada nilai border-color.
  • initial: mengatur nilai properti ke nilai initial.
  • inherit: mengatur nilai properti turunan dari nilai parent.

Nilai dari properti borderStyle diperlihatkan sebagai berikut.

Contoh: penggunaan nilai none.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi lainnya 

seputar ilmu komputer dan 

dunia sekolah.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item');

// Pengaturan border style

elem.style.borderStyle = 'none';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi lainnya seputar ilmu komputer dan dunia sekolah.



Contoh: penggunaan nilai hidden.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item2 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item2">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

seputar ilmu pemrograman dan 

materi lainnya yang berkaitan 

dengan dunia TIK.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item2');

// pengaturan border style

elem.style.borderStyle = 'hidden';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar ilmu pemrograman dan materi lainnya yang berkaitan dengan dunia TIK.



Contoh: penggunaan nilai dotted.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item3 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item3">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

tentang ilmu pemrograman dan 

materi lainnya seputar ilmu 

komputer yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item3');

// Pengaturan border style

elem.style.borderStyle = 'dotted';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi tentang ilmu pemrograman dan materi lainnya seputar ilmu komputer yang sedang populer saat ini.



Contoh: penggunaan nilai dash.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item4 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item4">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

seputar ilmu pemrograman dan 

materi TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item4');

// Pengaturan border style

elem.style.borderStyle = 'dashed';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar ilmu pemrograman dan materi TIK lainnya yang sedang populer saat ini.



Contoh: penggunaan nilai solid.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item5 

{

padding: 10px;

border: 15px dotted green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<

class="item5">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman komputer dan ilmu 

TIK lainnya yang sedang

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item5');

// Pengaturan border style

elem.style.borderStyle = 'solid';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman komputer dan ilmu TIK lainnya yang sedang populer saat ini.



Contoh: penggunaan nilai double.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item6 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item6">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman komputer dan 

materi TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item6');

// Pengaturan border style

elem.style.borderStyle = 'double';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman komputer dan materi TIK lainnya yang sedang populer saat ini.



Contoh: penggunaan nilai groove.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item7 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item7">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

seputar pemrograman dan ilmu 

komputer lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item7');

// Pengaturan border style

elem.style.borderStyle = 'groove';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar pemrograman dan ilmu komputer lainnya yang sedang populer saat ini.



Contoh: penggunaan nilai ridge.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item8 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item8">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

seputar pemrograman dan ilmu 

komputer atau TIK lainnya yang 

sedang populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item8');

// Pengaturan border style

elem.style.borderStyle = 'ridge';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar pemrograman dan ilmu komputer atau TIK lainnya yang sedang populer saat ini.



Contoh: penggunaan nilai inset.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item9 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item9">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan ilmu TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item9');

// Pengaturan border style

elem.style.borderStyle = 'inset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan ilmu TIK lainnya yang sedang populer saat ini.



Contoh: penggunaan nilai outset.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item10 

{

padding: 10px;

border: 15px inset green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item10">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman komputer dan ilmu 

TIK lainnya yang saat ini 

sedang populer.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item10');

// Pengaturan border style

elem.style.borderStyle = 'outset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman komputer dan ilmu TIK lainnya yang saat ini sedang populer.



Contoh: penggunaan nilai initial.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

.item11 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<p class="item11">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan ilmu tik 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item11');

// Pengaturan border style

elem.style.borderStyle = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan ilmu tik lainnya yang sedang populer saat ini.



Contoh: penggunaan nilai inherit.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderStyle DOM

</title>

 

<style>

#parent 

{

border-style: dotted;

padding: 10px;

}

 

.item12 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderStyle DOM

</b>

 

<div id="parent">

<p class="item12">

Blog TIK merupakan portal ilmu 

komputer yang berisi berbagai 

materi seputar ilmu 

pemrograman dan ilmu lainnya 

yang sedang populer saat ini.

</p>

</div>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

elem = document.querySelector('.item12');

// Pengaturan border style

elem.style.borderStyle = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderStyle DOM

Blog TIK merupakan portal ilmu komputer yang berisi berbagai materi seputar ilmu pemrograman dan ilmu lainnya yang sedang populer saat ini.


Artikel ini didedikasikan kepada: M. Satria Adi Pradana, Maulana Lazuardi, Melindha Adhyana, Michael Kevin Bryan Sahertian, dan Mila Suryani.

5 komentar untuk "Mengatur Batas HTML Menggunakan borderStyle Style DOM"

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderStyle DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

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

    BalasHapus
    Balasan
    1. Properti borderStyle digunakan untuk mengatur atau mengembalikan nilai style dari border atau batas elemen. Properti borderStyle juga dapat digunakan untuk mengambil lebih dari satu atau hingga empat nilai sekaligus.

      Hapus
    2. Properti borderStyle DOM pada HTML digunakan sebagai suatu singkatan yang digunakan untuk mendapatkan atau mengatur nilai properti style batas dari suatu elemen.

      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 -