Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Border Kiri HTML Menggunakan borderLeftStyle DOM

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

12 Value Properti borderLeftStyle DOM HTML
Ilustrasi Properti borderLeftStyle

Sebelum memahami lebih dalam materi tentang Mengatur Border Kiri HTML Menggunakan borderLeftStyle DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Kiri Warna HTML Menggunakan borderLeftColor Style DOM [klik], Mengatur Batas Kiri HTML Menggunakan borderLeft Style DOM [klik], dan Mengatur Lebar Gambar HTML Menggunakan borderImageWidth Style DOM [klik].

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

Value Properti:
  • none: berfungsi untuk meniadakan border, dan merupakan nilai default dari properti borderLeftStyle.
  • hidden: berfungsi sama seperti properti 'none', kecuali digunakan untuk membantu selama border mengalami conflict resolution dalam tabel elemen.
  • dotted: digunakan sebagai bentuk border titik-titik.
  • dashed: digunakan untuk menampilkan garis dashed sebagai border.
  • solid: digunakan untuk menampilkan sebuah baris solid tunggal sebagai border.
  • double: digunakan untuk menampilkan dua baris sebagai border.
  • groove: digunakan untuk menampilkan border groove 3D, dengan efek yang muncul adalah bergantung pada nilai border-color.
  • ridge: digunakan untuk menampilkan border ridge 3D, dengan efek yang muncul adalah bergantung pada nilai border-color.
  • inset: digunakan untuk menampilkan border inset 3D, dengan efek yang muncul adalah bergantung pada nilai border-color.
  • outset: digunakan untuk menampilkan border outset 3D, dengan efek yang muncul adalah bergantung pada nilai border-color.
  • initial: mengatur nilai properti ke nilai initial.
  • inherit: mengatur nilai properti ke nilai turunannya yang berasal dari nilai parent.

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

Baca Juga:

Contoh: mendeskripsikan nilai properti none.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style borderLeftStyle 

DOM

</title>

 

<style>

.item 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<p class="item">

Blog TIk merupakan portal ilmu 

komputer dengan variasi besar 

yang dapat digunakan untuk 

penjelaskan berbagai ilmu 

komputer dan berbagai macam 

artikel pemrograman lainnya.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'none';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

Blog TIk merupakan portal ilmu komputer dengan variasi besar yang dapat digunakan untuk penjelaskan berbagai ilmu komputer dan berbagai macam artikel pemrograman lainnya.



Contoh: mendeskripsikan nilai properti hidden.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item1 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item1">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'hidden';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman.



Contoh: mendeskripsikan nilai properti dotted.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item2 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item2">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'dotted';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman.



Contoh: mendeskripsikan nilai properti dashed.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item3 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog elfan

</h1>

 

<b>

Properti Style borderLeftStyle 

DOM

</b>

 

<p class="item3">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

komputer.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'dashed';

}

</script>

 

</body>

 

</html>

Output:

Blog elfan

Properti Style borderLeftStyle DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu komputer.



Contoh: mendeskripsikan nilai properti solid.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item4 

{

padding: 10px;

border: 15px dotted green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item4">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman yang ada saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'solid';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

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



Contoh: mendeskripsikan nilai properti double.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item5 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item5">

Blog TIK berfungsi untuk 

mempelajari berbagai ilmu 

komputer dan berbagai macam 

ilmu populer lainnya dalam 

dunia TIK.

</p>

 

<button onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'double';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

Blog TIK berfungsi untuk mempelajari berbagai ilmu komputer dan berbagai macam ilmu populer lainnya dalam dunia TIK.



Contoh: mendeskripsikan nilai properti groove.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item6 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item6">

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>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'groove';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

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



Contoh: mendeskripsikan nilai properti ridge.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item7 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item7">

Blog TIK merupakan portal ilmu 

komputer merupakan blog 

pemrograman yang digunakan 

untuk mempelajari berbagai 

materi pemrograman dan 

beberapa materi lain seputar 

ilmu komputer.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'ridge';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

Blog TIK merupakan portal ilmu komputer merupakan blog pemrograman yang digunakan untuk mempelajari berbagai materi pemrograman dan beberapa materi lain seputar ilmu komputer.



Contoh: mendeskripsikan nilai properti inset.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style borderLeftStyle 

DOM

</title>

 

<style>

.item8 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item8">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan juga seputar 

ilmu komputer 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.borderLeftStyle = 'inset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

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



Contoh: mendeskripsikan nilai properti outset.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item9 

{

padding: 10px;

border: 15px inset green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item9">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari ilmu pemrograman 

dan ilmu komputer 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.borderLeftStyle = 'outset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

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



Contoh: mendeskripsikan nilai properti initial.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

.item10 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<

class="item10">

Blog TIK merupakan portal ilmu 

komputer yang terdiri berbagai 

materi pemrograman dan ilmu 

komputer lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

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



Contoh: mendeskripsikan nilai properti inherit.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

borderLeftStyle

</title>

 

<style>

#parent 

{

border-left-style: dotted;

padding: 10px;

}

 

.item11 

{

padding: 10px;

border: 15px solid green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

borderLeftStyle

</b>

 

<div id="parent">

<p class="item11">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari materi pemrograman 

dan materi TIK lainnya yang 

sedang populer saat ini.

</p>

</div>

 

<button 

onclick="changeBorderStyle()">

Change style

</button>

 

<script>

function changeBorderStyle() 

{

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

// Pengaturan border style

elem.style.borderLeftStyle = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style borderLeftStyle

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


Artikel ini didedikasikan kepada: Irwan Syah, Ismatul Maula, Isnaeni Estu Romandhoni, Izza Alya Fatma, dan Izzani Salsabillah.

5 komentar untuk "Mengatur Border Kiri HTML Menggunakan borderLeftStyle DOM"

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

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

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

    BalasHapus
    Balasan
    1. Properti borderLeftStyle DOM pada HTML berfungsi untuk menetapkan jenis style atau gaya dari borderLeft elemen pada dokumen HTML.

      Hapus
    2. Properti borderLeftStyle DOM pada HTML berfungsi untuk menetapkan style borderLeft atau style batas kiri dari suatu elemen. Properti ini didefinisikan sebagai suatu kata kunci tunggal yang dipilih dari beberapa kata kunci yang tersedia untuk properti style border. Properti borderLeftStyle digunakan untuk mengatur style dari keempat sisi elemen, dimana style borderLeft juga digunakan untuk menetapkan style hanya untuk batas kiri saja.

      Lebar default dari borderLeft adalah medium. Dimana nilai tersebut dapat diubah baik dengan menggunakan properti borderLeftWidth atau borderWidth.

      Tidak semua browser dapat melakukan rendering style dengan cara yang sama. Misalnya, pada browser Chrome titik-titik border yang diberikean oleh properti border adalah berbentuk titik-titik persegi panjang, bukan sebagai titik-titik lingkaran, dan juga beberapa jenis browser lainnya.

      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 -