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()">
            GeeksforGeeks.!
        </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>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";
            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

HTML DOM Style borderBottomRightRadius Property

Explore