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

Mengatur Batas Radius HTML Menggunakan borderTopLeftRadius Style DOM

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


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

Sintak:
  • untuk mendapatkan nilai properti borderTopLeftRadius: object.style.borderTopLeftRadius
  • untuk mengatur nilai properti borderTopLeftRadius: object.style.borderTopLeftRadius = "length|percentage|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti border-top-left-radius dari suatu elemen.

Baca Juga:

Property Values:
  • length: digunakan untuk mendefinisikan nilai radius yang bersesuaian dengan nilai length unit. Juga, dapat digunakan dua nilai untuk menentukan radius dari quarter ellipse, dimana nilai pertama adalah mewakili nilai horizontal dan nilai kedua mewakili nilai vertikal.
  • percentage: digunakan untuk mendefinisikan nilai radius dalam satuan persen. Juga, dapat digunakan dua nilai untuk menentukan nilai radius dari quarter ellipse, dimana nilai pertama mewakili nilai radius horizontal dalam satuan persen untuk nilai lebar dari border-box, dan nilai kedua mewakili nilai radius vertikal dalam satuan persen untuk nilia panjang dari border-box.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan properti dari nilai parent.

Contoh: penggunaan satu nilai untuk menentukan nilai radius.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopLeftRadius DOM

</title>

 

<style>

.elem1 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopLeftRadius DOM

</b>

 

<p class="elem1">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai macam 

ilmu pemrograman komputer dan 

materi lainnya yang berbaikan 

dengan dunia TIK yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeRadius()">

Change borderTopLeftRadius

</button>

 

<!-- Script untuk mengubah 

borderTopLeftRadius -->

<script>

function changeRadius() 

{

elem1 = document.querySelector('.elem1');

elem1.style.borderTopLeftRadius = '30px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopLeftRadius DOM

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



Contoh: penggunaan dua nilai untuk menentukan nilai radius.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopLeftRadius DOM

</title>

 

<style>

.elem2 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style BorderTopLeftRadius

</b>

 

<p class="elem2">

Blog TIk merupakan portal ilmu 

komputer yang berisi berbagai 

materi pemrograman dan materi 

TIK yang sedang populer saat 

ini.

</p>

 

<button 

onclick="changeRadius()">

Change borderTopLeftRadius

</button>

 

<!-- Script untuk mengubah 

borderTopLeftRadius -->

<script>

function changeRadius() 

{

elem2 = document.querySelector('.elem2');

elem2.style.borderTopLeftRadius = '30px 60px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

DOM Style BorderTopLeftRadius

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



Contoh: penggunaan satu nilai untuk menentukan nilai radius.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopLeftRadius DOM

</title>

 

<style>

.elem3 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopLeftRadius DOM

</b>

 

<p class="elem3">

Blog TIk merupakan portal ilmu 

komputer yang berisi berbagai 

materi pemrograman komputer 

dan materi lain seputar TIK 

yang sedang populer saat ini.

</p>

 

<button 

onclick="changeRadius()">

Change borderTopLeftRadius

</button>

 

<!-- Script untuk mengubah 

borderTopLeftRadius -->

<script>

function changeRadius() 

{

elem3 = document.querySelector('.elem3');

elem3.style.borderTopLeftRadius = '20%';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopLeftRadius DOM

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



Contoh: penggunaan dua nilai untuk menentukan nilai radius.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopLeftRadius DOM

</title>

 

<style>

.elem4 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopLeftRadius DOM

</b>

 

<p class="elem4">

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="changeRadius()">

Change borderTopLeftRadius

</button>

 

<!-- Script untuk mengubah 

borderTopLeftRadius -->

<script>

function changeRadius() 

{

elem4 = document.querySelector('.elem4');

elem4.style.borderTopLeftRadius = '30% 90%';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopLeftRadius DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopLeftRadius DOM

</title>

 

<style>

.elem5 

{

padding: 10px;

border-style: solid;

border-top-left-radius: 30px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopLeftRadius DOM

</b>

 

<p 

class="elem5">

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="changeRadius()">

Change borderTopLeftRadius

</button>

 

<!-- Script untuk mengubah 

borderTopLeftRadius -->

<script>

function changeRadius() 

{

elem5 = document.querySelector('.elem5');

elem5.style.borderTopLeftRadius = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopLeftRadius DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopLeftRadius DOM

</title>

 

<style>

#parent 

{

padding: 10px;

border-style: solid;

/* Pengaturan 

borderTopLeftRadius dari 

parent */

border-top-left-radius: 30px;

}

 

.elem6 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopLeftRadius DOM

</b>

 

<br>

<br>

 

<div id="parent">

<p class="elem6">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

</div>

 

<br>

 

<button 

onclick="changeRadius()">

Change borderTopLeftRadius

</button>

 

<!-- Script untuk mengubah 

borderTopLeftRadius -->

<script>

function changeRadius() 

{

elem6 = document.querySelector('.elem6');

elem6.style.borderTopLeftRadius = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopLeftRadius DOM

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



Artikel ini didedikasikan kepada: Michael Kevin Bryan Sahertian, Mila Suryani, Muchamad Mujib, Muchammad Syaifur Rohim, dan Muhammad Burhannudin.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Batas Radius HTML Menggunakan borderTopLeftRadius Style DOM"

  1. AnonimRabu, 15 Juni 2022 pukul 15.32.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimRabu, 15 Juni 2022 pukul 15.33.00 WIB

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

      Hapus
  2. AnonimKamis, 16 Juni 2022 pukul 10.41.00 WIB

    Apa yang dimaksud dengan properti borderTopLeftRadius Style DOM pada HTML?

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

      Properti borderTopLeftRadius Style DOM pada HTML digunakan untuk mengembalikan nilai bentuk batas dari sudut kiri atas elemen, dimana properti ini memungkinkan pengembang untuk melakukan penambahan batas bulat ke elemen yang dikenainya.

      Hapus
    2. AnonimKamis, 16 Juni 2022 pukul 10.44.00 WIB

      Properti borderTopLeftRadius Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan bentuk dari sudut kiri atas border suatu elemen. Atribut ini juga memungkinkan pengembang untuk melakukan penambahan sudut pembulat ke elemen yang dikenainya.

      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 -