Mengatur Radius Border HTML Menggunakan borderBottomRightRadius Style DOM
 |
| Ilustrasi borderBottomRightRadius HTML |
- berfungsi untuk mengembalikan nilai properti borderBottomRightRadius: object.style.borderBottomRightRadius
- berfungsi untuk mengatur properti borderBottom: object.style.borderBottomRightRadius = "length|% [length|%]|initial|inherit"
Parameter:
- length: digunakan untuk mendefinisikan shape dari right-bottom corner.
- %: digunakan untuk melakukan hal yang sama seperti parameter length tetapi dengan format satuan ukur persen.
- initial: digunakan untuk mengatur properti borderBottomRightRadius ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent-nya.
Return Value: digunakan untuk mengatur atau mengembalikan nilai radius dari border bottom right corner.
Berikut adalah ilustrasi penggunaan properti borderBottomRightRadius.
Contoh: pengaturan nilai bottom-right-radius ke 25px.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
borderBottomRightRadius DOM
HTML
</title>
<style>
div
{
border: 1px solid green;
width: 300px;
padding: 40px;
height: 100px;
color: green;}
</style>
</head>
<body>
<div
id="mainDiv">
<h1
onclick="myFunction()">
Blog Elfan
</h1>
</div>
<script>
function myFunction()
{
document.getElementById("mainDiv").style.borderBottomRightRadius =
"25px";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
borderBottomRightRadius DOM
HTML
</title>
<style>
div
{
border: 1px solid green;
width: 300px;
padding: 40px;
height: 100px;
color: green;}
</style>
</head>
<body>
<div
id="mainDiv">
<h1>
Blog Elfan
</h1>
</div>
<br>
<p
id="val">
Nilai yang diatur ke bottom
right radius adalah:
<span
id="value">?
</span>
</p>
<br>
<input
type="button"
onclick="myFunction()"
value="Klik dan periksa nilai radius." />
<script>
function myFunction()
{
document.getElementById("mainDiv").style.borderBottomRightRadius = "25px";
var x = document.getElementById("mainDiv").style.borderBottomRightRadius;
document.getElementById("value").innerHTML = x;
}
</script>
</body>
</html>
- 7 Value Properti borderImage Style DOM pada HTML [klik]
- 5 Contoh Penggunaan Properti borderImageOutset Style DOM pada HTML [klik]
- 4 Contoh Penggunaan Properti borderImageRepeat Style DOM pada HTML [klik]
- 5 Contoh Properti borderImageSlice Style DOM pada HTML [klik]
- 4 Contoh Properti borderImageSource Style DOM pada HTML [klik]
- 6 Contoh Properti borderImageWidth Style DOM pada HTML [klik]
- 5 Value Properti borderLeft Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderBottomRightRadius Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti borderBottomRIght Style DOM pada HTML:
Hapus1. Google Chromeb 5.0
2. Internet Explorer 9.0
3. Firefox 4.0
4. Opera 10.5
5. Safari 5.0
Apa yang dimaksud dengan properti borderBottomRightRadius Style DOM pada HTML?
BalasHapusProperti borderBottomRightRadius Style DOM pada HTMl merupakan properti yang digunakan untuk mengatur atau mengembalikan bentuk batas dari sudut kanan bawah pada suatu elemen HTML.
HapusProperti berdorBottomRightRadius juga memungkinkan user untuk melakukan penambahan batas dalam bentuk bulat ke suatu elemen pada HTML.
Hapus