HTML - DOM Style Object borderWidth Property

Quiz

HTML DOM Style Object borderWidth property sets or returns the border width of the element.

It can take from one to four values which can be implemented as follows:

One Value: For one value, border width for all four borders will be same. For example: h1 {border-width: 4px}
Two Value: For two value, border width for top and bottom border will be same , left and right border will be of same width. For example: h1 {border-width: 4px thin}
Three Value: For three value, top and bottom border will be of different border width whereas left and right border will be of same width. For example: h1 {border-width: 4px thin medium}
Four Value: For four value, all borders will have different width. For example: h1 {border-width: 4px thin medium thick}

Syntax

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

Set the borderWidth property:

object.style.borderWidth= "thin | medium | thick | length | initial | inherit";

Get the borderWidth property:

object.style.borderWidth;

Property Values

Value	Description
thin	It specifies a thin border.
medium	It is default value which specifies a medium border.
thick	It specifies a thick border.
length	It specifies border width in CSS measurement units like px.
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 width of an element.

Examples of HTML DOM Style Object 'borderWidth' Property

The following examples illustrates different border width values.

Change the Border width

In the following example we have changed the border width from 2px to thick.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderWidth Property
    </title>
    <style>
        #border {
            border: 2px solid;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="fun()">Change Border</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
            .style.borderWidth = "thick";
        }
    </script>
</body>
</html>

Set Multiple Border width

In the following example we have used two-value, three-value, four-value to set different border width for different sides.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderWidth Property
    </Title>
    <style>
        h1 {
            border : solid black;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="funtwo()">Two Border</button>
    <button onclick="funthree()">Three Border</button>
    <button onclick="funfour()">Four Border</button>
    <h1 id="border">
        Welcome to Tutorials Point...
    </h1>
    <script>
        function funtwo() {
            document.getElementById("border")
            .style.borderWidth = "4px thin";
        }
        function funthree() {
            document.getElementById("border")
            .style.borderWidth = "4px thin 8px";
        }
        function funfour() {
            document.getElementById("border")
            .style.borderWidth = "4px thin 8px thick";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderWidth	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page