Open In App
Related Articles

HTML DOM Style borderBottomRightRadius Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads