La propiedad DOM borderBottomRightRadius se usa para seleccionar cualquier elemento del árbol DOM y establecer el estilo del radio de la esquina inferior derecha de su borde.
Sintaxis:
- Devuelve la propiedad borderBottomRightRadius.
object.style.borderBottomRightRadius
- Se utiliza para establecer la propiedad borderBottom.
object.style.borderBottomRightRadius = "length|% [length|%]| initial|inherit"
Parámetro:
- longitud: define la forma de la esquina inferior derecha.
- %: Haz las mismas tangas en formato de porcentaje.
- initial: establecerá la propiedad en su valor predeterminado.
- heredar: hereda la propiedad de su elemento padre
Valor devuelto: Esto establece o devuelve el valor del radio del borde de la esquina inferior derecha. Los siguientes ejemplos ilustran la propiedad borderBottomRightRadius: Ejemplo 1: Esto establecerá el valor del radio inferior derecho en 25 px.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style borderBottomRightRadius Property
</title>
<style>
div {
border: 1px solid green;
width: 300px;
padding: 40px;
height: 100px;
color: green;
}
</style>
</head>
<body>
<div id="mainDiv">
<h1 onclick="myFunction()">
GeeksforGeeks.!
</h1>
</div>
<script>
function myFunction() {
document.getElementById("mainDiv").style.borderBottomRightRadius =
"25px";
}
</script>
</body>
</html>
Salida: antes de hacer clic dentro del elemento «div».
Después de hacer clic en el elemento div.
Ejemplo 2: Esto establecerá el valor del radio inferior derecho en 25 px y luego devolverá el valor establecido.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style borderBottomRightRadius Property
</title>
<style>
div {
border: 1px solid green;
width: 300px;
padding: 40px;
height: 100px;
color: green;
}
</style>
</head>
<body>
<div id="mainDiv">
<h1>GeeksforGeeks.!</h1>
</div>
<br>
<p id="val">
The value that set to the bottom right radius is :
<span id="value">?</span>
</p>
<br>
<input type="button" onclick="myFunction()"
value="Click Me and check the radius value.!" />
<script>
function myFunction() {
document.getElementById("mainDiv").style.borderBottomRightRadius = "25px";
var x = document.getElementById("mainDiv").style.borderBottomRightRadius;
document.getElementById("value").innerHTML = x;
}
</script>
</body>
</html>
Salida: antes de hacer clic en el botón.
Después de hacer clic en el botón.
Navegador compatible: El navegador compatible con HTML | Las propiedades DOM Style borderBottomRightRadius se enumeran a continuación:
- Google Chromeb 5.0
- Internet Explorer 9.0
- Firefox 4.0
- Ópera 10.5
- Safari 5.0
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA