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 shafe of right-bottom corner.
  • %: Do the same thongs in percentage format.
  • initial: It will set the property to it’s default value.
  • inherit: It inherits the property from it’s parrent element

Return Value : This sets or return the radius value of the bottom right corner border.

Below examples illustrate the borderBottomRightRadius property:

Example 1:
This will set the bottom-right-radius value to 25px.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output :
Before click inside the “div” element.

After click on the div element.

Example 2:
This will set the bottom-right-radius value to 25px and then return the value that set.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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";
            var x = document.getElementById("mainDiv").style.borderBottomRightRadius;
            document.getElementById("value").innerHTML = x;
  
        }
    </script>
  
</body>
  
</html>

chevron_right


Output :
Before click on the button.

After click on the button.

Supported Browser: The browser supported by HTML | DOM Style borderBottomRightRadius Property are listed below: