HTML - DOM Style Object border Property

Quiz

HTML DOM Style Object border property sets or returns the border properties of an element. It is a shorthand notation for border-width, border-style and border-color.

Syntax

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

Set the border property:

object.style.border= "width | style | color | initial | inherit";

Get the border property:

object.style.border;

Property Values

Value	Description
width	It sets the border width.
style	It sets the border style.
color	It sets the border color.
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 property of an element.

Example of HTML DOM Style Object 'border' Property

The following example illustrates implementation of border property to set a green dotted border of 4px.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object border Property
    </title>
</head>
<body>
        <button onclick="fun()">
            Add Border
        </button>
        <section id="border">
            Welcome to Tutorials Point...
        </section>
        <script>
            function fun() {
                document.getElementById("border")
                .style.border = "4px dotted #04af2f";
            }
        </script>
</body>
</html>

Supported Browsers

Property
border	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page