HTML - DOM Style Object borderTopRightRadius Property

Quiz

HTML DOM Style Object borderTopRightRadius property sets or return the border radius of top right corner.

Syntax

Set the borderTopRightRadius property:

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

Get the borderTopRightRadius property:

object.style.borderTopRightRadius;

Property Values

Value	Description
length	It defines the shape of border of the top-right corner. Dual length values may be used to define radii of quarter ellipse where first values represents horizontal radius or width of border box and second value represents the vertical radius or height of border box. It's default value is 0.
percentage	It defines the shape of border of the top-right corner in percentage. Dual percentage values may be used to define radii of quarter ellipse where first values represents horizontal radius or width of border box and second value represents the vertical radius or height of border box.
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-top-right-radius property of an element.

Examples of HTML DOM Style Object 'borderTopRightRadius' Property

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

Set Top Right Border Radius

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderTopRightRadius Property
    </title>
    <style>
        section {
            border: aqua 2px solid;
            height: 400px;
            width: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        Click to set the radius of top
        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.borderTopRightRadius = "40px";
        }
    </script>
</body>
</html>

Set Top Right Border Radius using Dual Value

The following example uses dual length values to set the border radius of top right corner using pixel value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderTopRightRadius Property
    </title>
    <style>
        section {
            border: aqua 2px solid;
            height: 400px;
            width: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        Click to set the radius of top 
        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.borderTopRightRadius = "40px 100px";
        }
    </script>
</body>
</html>

Set Top Right Border Radius using Percentage

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderTopRightRadius Property
    </title>
    <style>
        section {
            border: aqua 2px solid;
            height: 400px;
            width: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        Click to set the radius of 
        top 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.borderTopRightRadius = "15%";
        }
    </script>
</body>
</html>

Set Top Right Border Radius using Dual Percentage Value

The following example use dual percentage value to set the border radius of top right corner using percentage.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderTopRightRadius Property
    </title>
    <style>
        section {
            border: aqua 2px solid;
            height: 400px;
            width: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        Click to set the radius of 
        top 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.borderTopRightRadius = "15% 40%";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderTopRightRadius	Yes 4	Yes 12	Yes 4	Yes 5	Yes 10.5

html_dom.htm

Print Page