Mengatur Batas Radius HTML borderTopRightRadius Style DOM
- 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.
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.
<!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 DOMBlog 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 DOMBlog 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 DOMBlog 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 DOMBlog 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 DOMBlog 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 DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.
- 4 Contoh Properti boxSizing Style DOM pada HTML [klik]
- 4 Contoh Properti captionSide Style DOM pada HTML [klik]
- 6 Value Properti Clear Style DOM pada HTML [klik]
- 4 Value Properti clip Style DOM pada HTML [klik]
- 2 Contoh Properti color Style DOM pada HTML [klik]
- 4 Value Properti columnCount Style DOM pada HTML [klik]
- 4 Value columnFill Style DOM pada HTML [klik]
5 komentar untuk "Mengatur Batas Radius HTML borderTopRightRadius Style DOM"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderTopRightRadius Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderTopRightRadius Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer 9.0
3. Firefox
4. Apple Safari
5. Opera
Apa yang dimaksud dengan properti borderTopRightRadius Style DOM pada HTML?
BalasHapusProperti 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.
HapusProperti 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