Javascript Reference - HTML DOM Style borderBottomRightRadius Property








The borderBottomRightRadius property sets or gets border bottom right corner radius.

Browser Support

borderBottomRightRadius Yes 10.0 Yes Yes Yes

Syntax

Return the borderBottomRightRadius property:

object.style.borderBottomRightRadius

Set the borderBottomRightRadius property:

object.style.borderBottomRightRadius='length|%[length|%]|initial|inherit"

Property Values

ValueDescription
length set the length for radius
% set percentage size for radius




Technical Details

Default Value: 0
Return Value: A string representing the border-bottom-right-radius property
CSS Version CSS3

Example

The following code shows how to add a rounded border to the bottom-right corner of a div element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- w ww.j av  a 2 s .c  o  m-->
    border: 1px solid black;
    width: 300px;
    height: 300px;
}
</style>
</head>
<body>

<button onclick="myFunction()">test</button>

<div id="myDIV">Hello</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.borderBottomRightRadius = "25px";
}
</script>

</body>
</html>

The code above is rendered as follows: