Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Nilai Border HTML Menggunakan borderBottomLeftRadius Style DOM

Properti style borderBottomLeftRadius DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai radius border dari bottom-left corner.

4 Value Properti borderBottomLeftRadius Style DOM pada HTML
Ilustrasi borderBottomLeftRadius HTML

Sebelum memahami lebih dalam materi tentang Mengatur Nilai Border HTML Menggunakan borderBottomLeftRadius Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Warna Batas Bawah HTML borderBottomColor DOM [klik], Mengatur Batas Bawah HTML Menggunakan borderBottom Style DOM [klik], dan Mengatur Batas HTML Menggunakan Border Style DOM [klik].

Sintak:
  • berfungsi untuk mengembalikan nilai properti borderBottomLeftRadius: object.style.borderBottomLeftRadius
  • berfungsi untuk mengatur properti borderBottomLeftRadius: object.style.borderBottomLeftRadius = "length|%|initial|inherit"

Parameter:
  • length: digunakan untuk mendefinisikan shape dari bottom-left corner dengan nilai default adalah 0.
  • %: digunakan untuk melakukan proses yang sama seperti parameter length namun dengan format ukur persen.
  • initial: digunakan untuk mengatur properti borderBottomLeftRadius ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai properti turunan dari elemen parent.

Return Values: digunakan untuk mengembalikan nilai radius dari border bottom left corner.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<style>

div 

{

border: 1px solid black;

width: 300px;

text-align:center;

padding:30px;

color: green;

}

</style>

 

</head>

 

<body>

 

<div 

id = "main">

 

<h1>

Blog Elfan

</h1>

 

<button 

onclick="myBon1s()">

Click Here!

</button>

 

</div>

 

<script>

function myBon1s() 

{

document.getElementById("main").style.borderBottomLeftRadius

= "35px";

}

</script>

 

</body>

 

</html>


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<style>

div 

{

border: 1px solid black;

width: 300px;

text-align:center;

padding:30px;

color: green;}

</style>

 

</head>

 

<body>

 

<div 

id = "main">

 

<h1>

Blog Elfan

</h1>

 

</div>

 

<br>

 

<button 

onclick="myBon2s()">

Click Here!

</button>

 

<

id="val">

</p>

 

<script>

function myBon2s() 

{

document.getElementById("main").style.borderBottomLeftRadius

= "35px";

 

var x =

document.getElementById("main").style.borderBottomLeftRadius;

 

document.getElementById("val").innerHTML

= "Border Radius: " + x;

}

</script>

 

</body>

 

</html>


Artikel ini didedikasikan kepada: Fepti Artiani, Fianfigo Alrasyid Setiawan, Fidello Iqbaal Erfanda, Fiqi Nur Samsu Ahmad, dan Fitria Eka Puspitasari.

5 komentar untuk "Mengatur Nilai Border HTML Menggunakan borderBottomLeftRadius Style DOM"

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderBottomLeftRadius Style DOM pada HTML:
      1. Google Chrome 5.0, 4.0 -webkit-
      2. Internet Explorer 9.0
      3. Firefox 4.0, 3.0 -moz-
      4. Opera 10.5
      5. Safari 5.0, 3.1 -webkit-

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

    BalasHapus
    Balasan
    1. Properti borderBottomLeftRadius Style DOM pada HTMl merupakan properti yang digunakan untuk mengatur atau mengembalikan bentuk batas dari sudut kiri bawah pada suatu elemen HTML.

      Hapus
    2. Properti berdorBottomLeftRadius juga memungkinkan user untuk melakukan penambahan batas dalam bentuk bulat ke 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 -