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>