Skip to content
Related Articles

Related Articles

HTML | DOM Style borderBottomRightRadius Property

View Discussion
Improve Article
Save Article
  • Last Updated : 12 Aug, 2022
View Discussion
Improve Article
Save Article

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 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 parent 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. 

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 : 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. 

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

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:

  • 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!