HTML - DOM Style Object borderBottomLeftRadius Property

Quiz

HTML DOM Style Object borderBottomLeftRadius property sets or return the radius of bottom border of left corner.

Syntax

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

Set the borderBottomLeftRadius property:

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

Get the borderBottomLeftRadius property:

object.style.borderBottomLeftRadius;

Property Values

Value	Description
length	It defines the shape of border of the bottom-left corner. It's default value is 0.
percentage	It defines the shape of border of the bottom-left 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-left-radius property of an element.

Examples of HTML DOM Style Object 'borderBottomLeftRadius' Property

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

Set Bottom Left Border Radius

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

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

Set Bottom Left Border Radius using Percentage

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

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

Supported Browsers

Property
borderBottomLeftRadius	Yes 4	Yes 12	Yes 4	Yes 5	Yes 10.5

html_dom.htm

Print Page