HTML DOM Style borderBottomRightRadius Property

Last Updated : 13 Jun, 2023

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>