HTML - DOM Style Object borderTopWidth Property



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 Chrome Edge Firefox Safari Opera
borderTopWidth Yes 1 Yes 12 Yes 1 Yes 1 Yes 3.5
html_dom.htm
Advertisements