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:
  • Mendapatkan nilai borderTopStyleProperty: object.style.borderTopStyle
  • 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.

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.

Contoh: Penggunaan nilai none. Berikut akan didemonstrasikan nilai dari properti borderTopStyle yang diperlihatkan sebagai berikut.

<!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


Mengatur batas atas pada elemen dalam HTML adalah salah satu cara untuk meningkatkan tampilan dan fungsionalitas sebuah halaman web. Salah satu properti yang dapat digunakan untuk mengatur batas atas adalah borderTopStyle. Properti ini berfungsi untuk menentukan gaya atau jenis batas yang akan diterapkan pada bagian atas elemen. Gaya batas ini bisa mencakup berbagai pilihan, seperti garis solid, garis putus-putus, atau bahkan tidak ada sama sekali. Pemilihan gaya batas atas yang tepat dapat memengaruhi keseluruhan desain halaman web dan memberikan kesan yang lebih terstruktur dan rapi.

Batas atas pada sebuah elemen sering digunakan untuk memisahkan elemen tersebut dari elemen lain di sekitarnya. Pada banyak desain halaman web, batas atas menjadi salah satu elemen penting dalam menciptakan hierarki visual. Misalnya, batas atas pada sebuah header atau judul dapat membantu memisahkan konten dari bagian atas halaman, memberikan kesan jarak yang lebih luas dan memudahkan pembaca dalam menavigasi konten.

Penerapan borderTopStyle juga dapat mempengaruhi bagaimana elemen-elemen di dalam halaman berinteraksi dengan satu sama lain. Sebuah batas atas yang jelas dan terdefinisi dengan baik dapat menambah daya tarik visual dari elemen tersebut, membuatnya lebih mudah dikenali oleh pengunjung halaman. Sebaliknya, batas yang tidak terlihat atau terlalu lemah dapat membuat elemen tersebut tampak kurang menonjol, yang bisa berpengaruh pada kesan keseluruhan desain.

Pada umumnya, borderTopStyle dapat memiliki beberapa nilai yang mempengaruhi penampilannya. Misalnya, nilai solid akan menampilkan garis padat sebagai batas atas, memberikan kesan yang lebih tegas dan jelas. Nilai dotted akan menampilkan garis putus-putus, menciptakan efek visual yang lebih ringan dan lebih dinamis. Ada juga nilai dashed yang menghasilkan garis putus-putus, namun dengan panjang segmen garis yang lebih besar dibandingkan dengan nilai dotted. Selain itu, ada nilai none yang menghilangkan batas atas sama sekali, sehingga elemen tersebut tampak tanpa batas pada bagian atasnya.

Ketika memilih gaya batas atas, penting untuk mempertimbangkan keseluruhan tema desain halaman web. Pilihan gaya batas yang sesuai dengan desain keseluruhan dapat memperkuat kesan visual dan menciptakan tampilan yang lebih serasi. Sebaliknya, pemilihan gaya batas yang tidak sesuai dengan elemen-elemen lain di halaman dapat menyebabkan ketidaksesuaian visual, mengganggu kenyamanan mata pengunjung.

Selain gaya batas, ketebalan dan warna batas atas juga perlu diperhatikan. Meskipun borderTopStyle hanya mengatur gaya batas, seringkali properti ini digunakan bersamaan dengan borderTopWidth untuk mengatur ketebalan batas dan borderTopColor untuk menentukan warna batas atas. Kombinasi dari ketiga properti ini memungkinkan pengaturan batas atas yang lebih tepat sesuai dengan kebutuhan desain. Dengan demikian, elemen-elemen yang menggunakan borderTopStyle akan memiliki tampilan yang lebih konsisten dan seimbang.

Penerapan batas atas tidak hanya terbatas pada elemen-elemen tertentu seperti header atau bagian atas kartu. Batas atas juga dapat diterapkan pada berbagai elemen lainnya, seperti paragraf, daftar, atau bahkan elemen-elemen di dalam tabel. Setiap elemen dapat diberikan batas atas untuk memperjelas pemisahan antar bagian, membuatnya lebih mudah dibaca, dan menambah estetika desain halaman.

Penting untuk mengingat bahwa pengaturan batas atas dengan borderTopStyle bersifat spesifik pada elemen yang diberi aturan tersebut. Artinya, jika suatu elemen tidak memiliki aturan batas atas, maka gaya batas atas yang ditentukan tidak akan berlaku. Oleh karena itu, pengaturan batas atas ini harus dipertimbangkan dengan cermat, terutama pada elemen-elemen yang membutuhkan pemisahan visual yang jelas antara konten dan bagian sekitarnya.

Selain itu, perlu diingat bahwa pengaturan batas atas menggunakan borderTopStyle dapat dipengaruhi oleh faktor-faktor lain dalam desain, seperti padding dan margin. Padding dapat memberikan jarak tambahan antara konten dan batas, sementara margin akan memberi jarak antara elemen tersebut dengan elemen lain di luar batasnya. Pengaturan padding dan margin ini dapat membantu menyeimbangkan jarak antara elemen-elemen yang diberi batas atas, menciptakan tampilan yang lebih proporsional dan estetis.

Pada halaman web yang responsif, pengaturan batas atas juga harus diperhatikan agar tetap terlihat baik pada berbagai ukuran layar. Beberapa desain mungkin memerlukan penyesuaian gaya batas atas tergantung pada perangkat yang digunakan untuk mengakses halaman tersebut. Misalnya, pada perangkat mobile, batas atas yang terlalu tebal atau terlalu mencolok mungkin tidak cocok dengan desain yang lebih sederhana dan bersih. Oleh karena itu, penting untuk mempertimbangkan fleksibilitas desain dan memastikan bahwa gaya batas tetap konsisten meskipun pada berbagai ukuran layar.

Batas atas juga dapat digunakan dalam konteks elemen-elemen interaktif, seperti tombol atau elemen navigasi. Pada elemen-elemen ini, batas atas yang jelas dan tegas dapat memberikan umpan balik visual yang kuat kepada pengunjung, menandakan bahwa elemen tersebut dapat diinteraksi. Misalnya, sebuah tombol dengan batas atas yang solid dapat memberikan kesan bahwa tombol tersebut lebih mudah dikenali dan dapat diklik, sedangkan tombol dengan batas yang lebih ringan atau tidak ada batas atas sama sekali dapat memberikan kesan yang lebih halus dan elegan.

Sebagai kesimpulan, borderTopStyle adalah properti yang sangat berguna dalam pengaturan tampilan elemen-elemen di halaman web. Properti ini memberikan fleksibilitas dalam mendesain batas atas elemen dengan berbagai gaya yang dapat dipilih sesuai dengan kebutuhan dan tema desain. Pemilihan gaya batas yang tepat dapat meningkatkan daya tarik visual, memperjelas pemisahan antar elemen, dan membuat halaman web lebih mudah dinavigasi. Dalam proses perancangan halaman web, perhatian terhadap detail seperti batas atas ini sangat penting untuk menciptakan tampilan yang estetis, terstruktur, dan mudah digunakan oleh pengunjung.

Artikel ini akan dibaca oleh: 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 -