Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Batas Radius HTML borderTopRightRadius Style DOM

Properti borderTopRightRadius Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai radius dari border top right dari suatu elemen.

6 Contoh Properti borderTopRightRadius Style DOM pada HTML
Ilustrasi borderTopRightRadius HTML

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

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

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

Baca Juga:

Property Values:
  • length: digunakan untuk mendefinisikan nilai radius yang bersesuaian dengan unit length. Juga, dapat digunakan dua nilai untuk menentukan nilai radius dari quarter ellipse, dimana nilai pertama digunakan untuk menentukan nilai radius horizontal, dan nilai kedua digunakan untuk menentukan nilai radius vertikal.
  • percentage: digunakan untuk mendefinisikan nilai radius dalam satuan persen. Juga, dua nilai dapat digunakan untuk menentukan nilai radius dari quarter ellipse, dimana nilai pertama digunakan untuk menentukan nilai radius horizontal dalam satuan persen dari lebar border box, dan nilai kedua digunakan untuk menentukan nilai radius vertikal dalam satuan persen dari lebar panjang border-box.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: berfungsi 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 

BorderTopRightRadius DOM

</title>

 

<style>

.elem1 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopRightRadius DOM

</b>

 

<p class="elem1">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

tentang pemrograman dan 

materilainnya yang berkaitan 

dengan dunia TIK yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeRadius()">

Change borderTopRightRadius

</button>

 

<!-- Script untuk mengubah 

borderTopRightRadius -->

<script>

function changeRadius() 

{

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

elem1.style.borderTopRightRadius = '30px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopRightRadius DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi tentang pemrograman dan materilainnya yang berkaitan 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 

BorderTopRightRadius DOM

</title>

 

<style>

.elem2 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopRightRadius DOM

</b>

 

<p class="elem2">

Blog TIK merupakan portal ilmu 

komputer yang merupakan blog 

yang berisi berbagai materi 

tentang ilmu pemrograman 

komputer dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeRadius()">

Change borderTopRightRadius

</button>

 

<!-- Script untuk mengubah 

borderTopRightRadius -->

<script>

function changeRadius() 

{

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

elem2.style.borderTopRightRadius = '10px 30px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopRightRadius DOM

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



Contoh: penggunaan satu nilai untuk menentukan nilai radius.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopRightRadius DOM

</title>

 

<style>

.elem3 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopRightRadius DOM

</b>

 

<p class="elem3">

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 borderTopRightRadius

</button>

 

<!-- Script untuk mengubah 

borderTopRightRadius -->

<script>

function changeRadius() 

{

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

elem3.style.borderTopRightRadius = '20%';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopRightRadius 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 dua nilai untuk menentukan nilai radius.

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopRightRadius DOM

</title>

 

<style>

.elem4 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopRightRadius DOM

</b>

 

<p class="elem4">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai macam 

materi pemrograman komputer 

dan materi TIK lainnya yang 

sedang populer saat ini.

</p>

 

<button 

onclick="changeRadius()">

Change borderTopRightRadius

</button>

 

<!-- Script untuk mengubah 

borderTopRightRadius -->

<script>

function changeRadius() 

{

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

elem4.style.borderTopRightRadius = '10% 50%';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopRightRadius DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopRightRadius DOM

</title>

 

<style>

.elem5 

{

padding: 10px;

border-style: solid;

border-top-right-radius: 20px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopRightRadius DOM

</b>

 

<p class="elem5">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai macam 

materi pemrograman komputer 

dan materi lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeRadius()">

Change borderTopRightRadius

</button>

 

<!-- Script untuk mengubah 

borderTopRightRadius -->

<script>

function changeRadius() 

{

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

elem5.style.borderTopRightRadius = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopRightRadius DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

BorderTopRightRadius DOM

</title>

 

<style>

#parent 

{

padding: 10px;

border-style: solid;

/* Pengaturan nilai 

borderTopRightRadius dari 

parent */

border-top-right-radius: 30px;

}

 

.elem6 

{

padding: 10px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

BorderTopRightRadius DOM

</b>

 

<br>

<br>

 

<div id="parent">

<p class="elem6">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

</div>

 

<br>

 

<button 

onclick="changeRadius()">

Change borderTopRightRadius

</button>

 

<!-- Script untuk mengubah 

borderTopRightRadius -->

<script>

function changeRadius() 

{

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

elem6.style.borderTopRightRadius = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopRightRadius DOM

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



Artikel ini didedikasikan kepada: Mila Suryani, Muchamad Mujib, Muchammad Syaifur Rohim, Muhammad Burhannudin, dan Muhammad Iqbal Nurfaidzi Gustian.

5 komentar untuk "Mengatur Batas Radius HTML borderTopRightRadius Style DOM"

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

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

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

    BalasHapus
    Balasan
    1. Properti borderTopRightRadius style DOM pada HTML merupakan properti yang digunakan untuk mendefinisikan bentuk batas sudut kanan atas, dimana properti ini juga memungkinkan pengembang untuk melakukan penambahan batas bulat ke elemen yang dikenainya.

      Hapus
    2. Properti borderTopRightRadius style DOM pada HTML merupakan properti yang digunakan untuk mengembalikan bentuk batas kanan bawah dari suatu elemen, dimana atribut ini juga memungkinkan untuk melakukan penambahan sudut berbentuk bulat.

      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 -