HTML - DOM Style Object borderRadius Property

Quiz

HTML DOM Style Object 'borderRadius' property is used as a shorthand property which sets or returns four different borderRadius properties which are borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius and borderBottomLeftRadius.

Syntax

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

Set the borderRadius property:

object.style.borderRadius= "1-4 length | % / 1-4 length|%| initial | inherit";

Get the borderRadius property:

object.style.borderRadius;

Property Values

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

Example of HTML DOM Style Object 'borderRadius' Property

The following example illustrates to add border radius using length value and percentage value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderRadius Property
    </title>
    <style>
        section {
            border: aqua 2px solid;
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>
        Click to add or change the border radius.
    </p>
    <button onclick="fun()">Add</button>
    <button onclick="funTwo()">Change</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
            .style.borderRadius = "25px";
        }
        function funTwo() {
            document.getElementById("border")
            .style.borderRadius = "15%";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderRadius	Yes 4	Yes 12	Yes 4	Yes 5	Yes 10.5

html_dom.htm

Print Page