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

Mengatur Batas Kanan HTML Menggunakan borderRightStyle DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style borderRightStyle DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai style dari border kanan elemen pada HTML.


Sebelum memahami lebih dalam materi tentang Mengatur Batas Kanan HTML Menggunakan borderRightStyle DOM, terlebih dahulu pelajari materi tentang: Mendefinisikan Judul HTML Menggunakan Tag Legend, Mengatur Batas Kanan HTML Menggunakan borderRight Style DOM, dan Mengatur Batas Radius HTML Menggunakan borderRadius Style DOM.

Sintak:
  • berfungsi untuk mengembalikan nilai properti borderRightStyle: object.style.borderRightStyle
  • berfungsi untuk mengatur nilai dari properti borderRightStyle: object.style.borderRightStyle="none | hidden | dotted |  dashed | solid | double | groove | ridge | inset | outset | initial | inherit"

Return Values: mengembalikan sebuah nilai string yang merepresentasikan style dari elemen border kanan HTML.

Baca Juga:

Property Values:
  • none: tidak menciptakan border apapun, dan merupakan nilai default dari properti borderRightStyle.
  • hidden: hampir sama seperti nilai properti 'none', tetapi nilai ini juga berfungsi untuk membantu pada saat terjadi konflik resolusi pada elemen tabel.
  • dotted: digunakan untuk membuat baris titik-titik sebagai baris border.
  • dashed: digunakan baris dash sebagai baris border.
  • solid: menggunakan sebuah baris solid tunggal sebagai nilai border.
  • double: memberikan nilai dua baris sebagai nilai border.
  • groove: merupakan border 3D yang ditampilkan pada layar monitor, yang akan memberikan efek bergantung pada nilai border-color yang diberikan.
  • ridge: merupakan border ridged 3D yang ditampilkan pada layar monitor, yang akan memberikan efek bergantung pada nilai border-color yang diberikan.
  • inset: merupakan border inset 3D yang ditampilkan pada layar monitor, yang akan memberikan efek bergantung pada nilai border-color yang diberikan.
  • outset: merupakan border outset 3D yang ditampilkan pada layar monitor, yang akan memberikan efek bergantung pada nilai border-color yang diberikan.
  • initial: berfungsi untuk mengatur nilai properti ke nilai default-nya.
  • inherit: berfungsi untuk mengatur nilai properti dari nilai elemen parent-nya.

Semua nilai properti yang telah dijelaskan sebelumnya akan diilustrasikan dalam bentuk contoh-contoh program HTML berikut.

Contoh: penggunaan nilai properti none.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item1 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item1">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script yang digunakan 

untuk properti DOM Style 

borderRightStyle -->

<script>

function changeBorderStyle() 

{

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

// Mengatur border style

elem.style.borderRightStyle = 'none';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti hidden.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item2 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item2">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan meteri TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti Style 

borderRightStyle 

DOM -->

<script>

function changeBorderStyle() 

{

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

// Mengatur border style

elem.style.borderRightStyle = 'hidden';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti dotted.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item3 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item3">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan ilmu seputar 

materi TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti Style 

borderRightStyle DOM -->

<script>

function changeBorderStyle() 

{

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

// Mengatur border style

elem.style.borderRightStyle = 'dotted';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti dashed.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item4 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item4">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti DOM Style 

borderRightStyle -->

<script>

function changeBorderStyle() 

{

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

// Mengatur border style

elem.style.borderRightStyle = 'dashed';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti solid.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item5 

{

padding: 10px;

border: 15px dotted green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item5">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan berbagai 

materi TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti DOM Style 

borderRightStyle -->

<script>

function changeBorderStyle() 

{

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

// mengatur border style

elem.style.borderRightStyle = 'solid';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti double.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item6 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item6">

Blog TIK merupakan portal ilmu 

komputer yang terdiri dari 

berbagai materi pemrograman 

dan materi-materi lainnya 

seputar ilmu TIK yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti DOM Style 

borderRightStyle -->

<script>

function changeBorderStyle() 

{

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

// mengatur border style

elem.style.borderRightStyle = 'double';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti groove.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item7 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item7">

Blog TIK merupakan portal ilmu 

komputer yang dapat digunakan 

untuk mempelajari berbagai 

materi seputar pemrograman dan 

materi TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti DOM Style 

borderRightStyle -->

<script>

function changeBorderStyle() 

{

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

// mengatur border style

elem.style.borderRightStyle = 'groove';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti ridge.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item8 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item8">

Blog TIK merupakan portal ilmu 

komputer yang berisi berbagai 

materi pemrograman dan materi 

TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti DOM Style 

borderRightStyle -->

<script>

function changeBorderStyle() 

{

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

// mengatur border style

elem.style.borderRightStyle = 'ridge';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti inset.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item9 

{

padding: 10px;

border: 15px outset green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item9">

Blog TIK merupakan portal ilmu 

komputer yang berisi berbagai 

materi pemrograman dan juga 

materi TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti Style 

borderRightStyle DOM -->

<script>

function changeBorderStyle() 

{

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

// mengatur border style

elem.style.borderRightStyle = 'inset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti outset.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item10 

{

padding: 10px;

border: 15px inset green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item10">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sendang populer 

saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti Style 

borderRightStyle DOM -->

<script>

function changeBorderStyle() 

{

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

// mengatur border style

elem.style.borderRightStyle = 'outset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti initial.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

.item11 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<p class="item11">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti DOM Style 

borderRightStyle -->

<script>

function changeBorderStyle() 

{

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

// mengatur border style

elem.style.borderRightStyle = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Contoh: penggunaan nilai properti inherit.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderRightStyle DOM

</title>

 

<style>

#parent 

{

border-right-style: dotted;

padding: 10px;

}

 

.item12 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderRightStyle DOM

</b>

 

<div id="parent">

<p class="item12">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari barbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

</div>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<!-- Script untuk menggunakan 

properti DOM Style 

borderRightStyle -->

<script>

function changeBorderStyle() 

{

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

// mengatur border style

elem.style.borderRightStyle = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderRightStyle DOM

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



Artikel ini didedikasikan kepada: Laelatul Khasanah, Linno Guntur Wibowo, Luthfia Nabila, M. Satria Adi Pradana, dan Maulana Lazuardi.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Batas Kanan HTML Menggunakan borderRightStyle DOM"

  1. AnonimSenin, 13 Juni 2022 pukul 08.57.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimSenin, 13 Juni 2022 pukul 08.58.00 WIB

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

      Hapus
  2. AnonimKamis, 16 Juni 2022 pukul 09.38.00 WIB

    Apa yang dimaksud dengan properti borderRightStyle DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimKamis, 16 Juni 2022 pukul 09.38.00 WIB

      Properti borderRightStyle DOM pada HTML digunakan untuk mengatur atau mengembalikan hingga tiga properti borderRight yang terpisah, dalam bentuk singkatan. Dengan menggunakan properti borderRightStyle, pengemgebang web dapat mengatur atau mengembalikan satu atau lebih beberapa nilai instruksi.

      Hapus
    2. AnonimKamis, 16 Juni 2022 pukul 09.39.00 WIB

      Properti borderRightStyle DOM pada HTML merupakan properti yang digunakan untuk menetapkan style batas kanan dari suatu elemen pada 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 -