Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Batas Atas HTML Menggunakan borderTopStyle DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti borderTopStyle Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai top border style dari suatu elemen.


Sebelum memahami lebih dalam materi tentang Mengatur Batas Atas HTML Menggunakan borderTopStyle DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Radius HTML borderTopRightRadius Style DOM, Mengatur Batas Radius HTML Menggunakan borderTopLeftRadius Style DOM, dan Mengatur Warna Batas Atas HTML Menggunakan borderTopColor Style DOM.

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

Return Values: berfungsi untuk mengembalikan sebuang nilai string yang merepresentasikan style dari elemen top border.

Baca Juga:

Property Values:
  • none: tidak ada border yang diciptakan, dan merupakan nilai default dari properti borderTopStyle.
  • hidden: memiliki fungsi yang hampir sama dengan value 'none', namun value ini dapat membantu pengembang selama terjadi konflik resolusi border dalam elemen tabel.
  • dotted: baris dot atau titik digunakan sebagai border.
  • dashed: baris dash digunakan sebagai border.
  • solid: baris solid tunggal digunakan sebagai border.
  • double: dua baris digunakan sebagai border.
  • groove: baris 3D grooved digunakan sebagai border, yang efeknya bergantung pada nilai border-color yang diberikan.
  • ridge: baris 3D ridged digunakan sebagai border, yang efeknya bergantung pada nilai border-color yang diberikan.
  • inset: baris 3D inset digunakan sebagai border, yang efeknya bergantung pada nilai border-color yang diberikan.
  • outset: baris 3D outset digunakan sebagai border, yang efeknya bergantung pada nilai border-color yang diberikan.
  • initial: digunakan untuk mengatur properti ke nilai initial-nya.
  • inherit: digunakan untuk mengatur properti turunan yang berasal dari parent.

Berikut akan didemonstrasikan nilai dari properti borderTopStyle yang diperlihatkan sebagai berikut.

Contoh: penggunaan nilai none.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item1 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style dari border top.

</p>

 

<div 

class="item1">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'none';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style dari border top.

Blog TIK


Contoh: penggunaan nilai hidden.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item2 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

stytle border top.

</p>

 

<div 

class="item2">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'hidden';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah stytle border top.

Blog TIK


Contoh: penggunaan nilai dot.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item3 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style dari border top.

</p>

 

<div 

class="item3">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'dotted';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style dari border top.

Blog TIK


Contoh: penggunaan nilai dash.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item4 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style dari border top.

</p>

 

<div 

class="item4">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'dashed';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style dari border top.

Blog TIK


Contoh: penggunaan nilai solid.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item5 

{

height: 50px;

padding: 10px;

border: 15px dotted green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untk mengubah 

style dari border top.

</p>

 

<div 

class="item5">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Properti border style

elem.style.borderTopStyle = 'solid';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untk mengubah style dari border top.

Blog TIK


Contoh: penggunaan nilai double.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item6 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style border top.

</p>

 

<div 

class="item6">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'double';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style border top.

Blog TIK


Contoh: penggunaan nilai groove.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item7 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style border top.

</p>

 

<div 

class="item7">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'groove';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style border top.

Blog TIK


Contoh: penggunaan nilai redge.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item8 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style border top.

</p>

 

<div 

class="item8">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'ridge';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style border top.

Blog TIK


Contoh: penggunaan nilai inset.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item9 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style border top.

</p>

 

<div 

class="item9">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'inset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style border top.

Blog TIK


Contoh: penggunaan nilai outset.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item10 

{

height: 50px;

padding: 10px;

border: 15px inset green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untk mengubah 

style border top.

</p>

 

<div 

class="item10">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'outset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untk mengubah style border top.

Blog TIK


Contoh: penggunaan nilai initial.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

.item11 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style border top.

</p>

 

<div 

class="item11">

Blog TIK

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style border top.

Blog TIK


Contoh: penggunaan nilai inherit.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style borderTopStyle 

DOM

</title>

 

<style>

#parent 

{

border-top-style: dotted;

padding: 10px;

}

 

.item12 

{

height: 50px;

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style borderTopStyle 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

style border top.

</p>

 

<div id="parent">

<div class="item12">

Blog TIK

</div>

</div>

 

<button 

onclick="changeBorderTopStyle()">

Change style

</button>

 

<script>

function changeBorderTopStyle() 

{

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

// Pengaturan border style

elem.style.borderTopStyle = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderTopStyle DOM

Klik tombol untuk mengubah style border top.

Blog TIK

Artikel ini didedikasikan kepada: Muchamad Mujib, Muchammad Syaifur Rohim, Muhammad Burhannudin, Muhammad Iqbal Nurfaidzi Gustian, dan Muhammad Maulana.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Batas Atas HTML Menggunakan borderTopStyle DOM"

  1. AnonimMinggu, 19 Juni 2022 pukul 12.00.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderTopStyle DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimMinggu, 19 Juni 2022 pukul 12.00.00 WIB

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

      Hapus
  2. AnonimRabu, 22 Juni 2022 pukul 13.34.00 WIB

    Apa yang dimaksud dengan properti borderTopStyle DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 22 Juni 2022 pukul 13.35.00 WIB

      Properti borderTopStyle DOM pada HTML merupakan properti spesifik dari properti borderTop yang digunakan untuk mengatur style border bagian top dari dokumen HTML.

      Hapus
    2. AnonimRabu, 22 Juni 2022 pukul 13.38.00 WIB

      Style dalam hal ini adalah bentuk tampilan atau gaya dari garis dari elemen html.

      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 -