HTML - DOM Style Object borderBottomRightRadius Property

Quiz

HTML DOM Style Object borderBottomRightRadius property sets or return the radius of bottom border of right corner.

Syntax

Given below are the syntax to get or set the borderBottomRightRadius property.

Set the borderBottomRightRadius property

object.style.borderBottomRightRadius= "length | percentage | initial | inherit";

Get the borderBottomRightRadius property

object.style.borderBottomRightRadius;

Property Values

Value	Description
length	It defines the shape of border of the bottom-right corner. It's default value is 0.
percentage	It defines the shape of border of the bottom-Right corner in percentage.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents border-bottom-right-radius property of an element.

Examples of HTML DOM Style Object 'borderBottomRightRadius' Property

The following examples illustrates to change the border radius of bottom right corner using length and percentage values.

Set Bottom Right Border Radius

The following example sets the border radius of bottom right corner using pixel value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderBottomRightRadius Property
    </title>
    <style>
        section {
            border: aqua 2px solid;
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>
        Click to set the radius of Bottom 
        Border of right corner.
    </p>
    <button onclick="fun()">Change</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderBottomRightRadius = "40px";
        }
    </script>
</body>
</html>

Set Bottom Right Border Radius using Percentage

The following example sets the border radius of bottom right corner using pixel percentage.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderBottomRightRadius Property
    </title>
    <style>
        section {
            border: aqua 2px solid;
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>
        Click to set the radius of Bottom Border
        of Right corner.
    </p>
    <button onclick="fun()">Change</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderBottomRightRadius = "15%";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderBottomRightRadius	Yes 4	Yes 12	Yes 4	Yes 5	Yes 10.5

html_dom.htm

Print Page