HTML DOM Style borderBottomRightRadius Property
The DOM borderBottomRightRadius property is used to select any element from the DOM tree and set the style of the radius of the bottom-right corner of its border.
Syntax :
- It returns the borderBottomRightRadius Property.
object.style.borderBottomRightRadius
- It is used to set the borderBottom property.
object.style.borderBottomRightRadius = "length|% [length|%]| initial|inherit"
Parameter:
- length: Define the shape of the right-bottom corner.
- %: Do the same thongs in a percentage format.
- initial: It will set the property to its default value.
- inherit: It inherits the property from its parent element
Return Value: This sets or returns the radius value of the bottom right corner border.
The below examples illustrate the borderBottomRightRadius property:
Example 1: This will set the bottom-right-radius value to 25px.
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()" > w3wiki.! </ h1 > </ div > < script > function myFunction() { document.getElementById("mainDiv").style.borderBottomRightRadius = "25px"; } </ script > </ body > </ html > |
Output:
Example 2: This will set the bottom-right-radius value to 25px and then return the value that is set.
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 >w3wiki.!</ 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"; let x = document.getElementById("mainDiv").style.borderBottomRightRadius; document.getElementById("value").innerHTML = x; } </ script > </ body > </ html > |
Output:
Supported Browser: The browser supported by HTML DOM Style borderBottomRightRadius Property are listed below:
- Google Chrome 4.0 and above
- Edge 12.0 and above
- Internet Explorer 9.0 and above
- Firefox 4.0 and above
- Opera 10.5 and above
- Safari 5.0 and above