HTML - DOM Style Object borderTopWidth Property

Quiz

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

Syntax

Set the borderTopWidth property:

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

Get the borderTopWidth property:

object.style.borderTopWidth;

Property Values

Value	Description
thin	It specifies a thin top border of element.
medium	It is default value which specifies a medium top border of element.
thick	It specifies a top thick border of element.
length	It specifies top 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 top border width of an element.

Examples of HTML DOM Style Object 'borderTopWidth' Property

The following examples gets and sets top border width.

Set the Top Border Width of Element

The following examples illustrates diiferent top border width values like 'length', 'thin', 'medium' and 'thick'.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderTopWidth Property
    </Title>
    <style>
        h1 {
            border: solid 1px #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to change the border style.</p>
    <button onclick="length()">Change Width</button>
    <button onclick="thin()">Thin</button>
    <button onclick="medium()">Medium</button>
    <button onclick="thick()">Thick</button>
    <h1 id="border">Welcome to Tutorials Point...</h1>
    <script>
        function length() {
            document.getElementById("border")
                .style.borderTopWidth = "10px";
        }
        function thin() {
            document.getElementById("border")
                .style.borderTopWidth = "thin";
        }
        function medium() {
            document.getElementById("border")
                .style.borderTopWidth = "medium";
        }
        function thick() {
            document.getElementById("border")
                .style.borderTopWidth = "thick";
        }
    </script>
</body>
</html>

Get Top Border Width Value

The following example returns the value of top border width.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderTopWidth Property
    </Title>
    <style>
        h1 {
            border: solid 1px #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to change the border style.</p>
    <button onclick="length()">Change Width</button>
    <button onclick="thin()">Thin</button>
    <button onclick="medium()">Medium</button>
    <button onclick="thick()">Thick</button>
    <h1 id="border">Welcome to Tutorials Point...</h1>
    <p id="top"></p>
    <script>
        function length() {
            let x = document.getElementById("border")
                .style.borderTopWidth = "10px";
            document.getElementById("top").innerHTML = x;
        }
        function thin() {
            let x = document.getElementById("border")
                .style.borderTopWidth = "thin";
            document.getElementById("top").innerHTML = x;
        }
        function medium() {
            let x = document.getElementById("border")
                .style.borderTopWidth = "medium";
            document.getElementById("top").innerHTML = x;
        }
        function thick() {
            let x = document.getElementById("border")
                .style.borderTopWidth = "thick";
            document.getElementById("top").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderTopWidth	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page