HTML - DOM Style Object borderStyle Property

Quiz

HTML DOM Style Object borderStyle property sets or returns the border style of an element.

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

One Value: For one value, border style for all four borders will be same. For example: h1 {border-style: solid}
Two Value: For two value, border style for top and bottom border will be same , left and right border will be of same style. For example: h1 {border-style: solid dotted}
Three Value: For three value, top and bottom border will be of different border style whereas left and right border will be of same style. For example: h1 {border-style: solid dotted dashed}
Four Value: For four value, all borders will have different style. For example: h1 {border-style: solid dotted dashed double}

Syntax

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

Set the borderStyle property:

object.style.borderStyle= "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit";

Get the borderStyle property:

object.style.borderStyle;

Property Values

Value	Description
none	It is default value which specifies no border.
hidden	It is same as 'none' but it creates a border which is transparent or not visible and takes the space as specified by border width. It is helpful in border conflict resolution in table elements.
dotted	It specifies a dotted border.
dashed	It specifies a dashed border.
solid	It specifies a solid border.
double	It defines a double border in which two lines are used as border and it's width is same as specified by borderWidth.
groove	It specifies a 3D grooved border whose effect depends on the border-color value.
ridge	It specifies a 3D grooved border whose effect depends on the border-color value.
inset	It specifies a 3D inset border whose effect depends on the border-color value.
outset	It specifies a 3D outset border whose effect depends on the border-color value.
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 style of an element.

Examples of HTML DOM Style Object 'borderStyle' Property

The following examples illustrates different border style values.

Change the Border Style

In the following example we have changed the border style from dotted to solid.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderStyle Property
    </title>
    <style>
        #border {
            border: 2px dotted;
        }
    </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.borderStyle = "solid";
        }
    </script>
</body>
</html>

Set Multiple Border Styles

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

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderStyle Property
    </Title>
    <style>
        h1 {
            border : 2px 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.borderStyle = "solid dotted";
        }
        function funthree() {
            document.getElementById("border")
            .style.borderStyle = "solid dotted dashed";
        }
        function funfour() {
            document.getElementById("border")
            .style.borderStyle = "solid dotted dashed double";
        }
    </script>
</body>
</html>

Set Border Style to 'groove' and 'ridge'

The following example sets the border style to groove and ridge.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderStyle Property
    </Title>
    <style>
        h1 {
            border : 2px solid aqua;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="groove()">Groove</button>
    <button onclick="ridge()">Ridge</button>
    <h1 id="border">
        Welcome to Tutorials Point...
    </h1>
    <script>
        function groove() {
            document.getElementById("border")
            .style.borderStyle = "groove";
        }
        function ridge() {
            document.getElementById("border")
            .style.borderStyle = "ridge";
        }
    </script>
</body>
</html>

Set Border Style to 'inset' and 'outset'

The following example sets the border style to inset and outset.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderStyle Property
    </Title>
    <style>
        h1 {
            border : 2px solid aqua;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="inset()">Inset</button>
    <button onclick="outset()">Outset</button>
    <h1 id="border">
        Welcome to Tutorials Point...
    </h1>
    <script>
        function inset() {
            document.getElementById("border")
            .style.borderStyle = "inset";
        }
        function outset() {
            document.getElementById("border")
            .style.borderStyle = "outset";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderStyle	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page