HTML - DOM Style Object borderTopLeftRadius Property

Quiz

HTML DOM Style Object borderTopLeftRadius property sets or return the border radius of top left corner.

Syntax

Set the borderTopLeftRadius property:

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

Get the borderTopLeftRadius property:

object.style.borderTopLeftRadius;

Property Values

Value	Description
length	It defines the shape of border of the top-left 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-left 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-left-radius property of an element.

Examples of HTML DOM Style Object 'borderTopLeftRadius' Property

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

Set Top Left Border Radius

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderTopLeftRadius 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 left corner.
    </p>
    <button onclick="fun()">Change</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderTopLeftRadius = "40px";
        }
    </script>
</body>
</html>

Set Top Left Border Radius using Dual Value

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderTopLeftRadius 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 left corner.
    </p>
    <button onclick="fun()">Change</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderTopLeftRadius = "40px 100px";
        }
    </script>
</body>
</html>

Set Top Left Border Radius using Percentage

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderTopLeftRadius 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 left corner.
    </p>
    <button onclick="fun()">Change</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderTopLeftRadius = "15%";
        }
    </script>
</body>
</html>

Set Top Left Border Radius using Dual Percentage Value

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderTopLeftRadius 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 left corner.
    </p>
    <button onclick="fun()">Change</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderTopLeftRadius = "15% 40%";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderTopLeftRadius	Yes 4	Yes 12	Yes 4	Yes 5	Yes 10.5

html_dom.htm

Print Page