In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > border (img, object, table, ...)

border property (img, object, table, ...)

Browser support:

Sets or retrieves the thickness of the border.

This property is deprecated.

Use the border style property instead, or use the rules property to specify a border drawing formula (vertical only, horizontal only or both).

Syntax:

object.border;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: border

Possible values:

String that sets or retrieves the thickness of the border, with an integer optionally followed by a 'px' (pixel) unit designator.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the border attribute:

<table id="myTable" border="6px">
    <tr>
        <td>Apple</td>
        <td>Pear</td>
        <td>Peach</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

<head>
    <style>
        .myTable {
            border:6px solid;
            /* top right bottom left */
            border-color:#ece9d8 #aca988 #aca988 #ece9d8;
        }

        .myTable td {
            border:1px solid;
            /* top right bottom left */
            border-color:#aca988 #ece9d8 #ece9d8 #aca988;
        }
    </style>
</head>
<body>
    <table class="myTable">
        <tr>
            <td>Apple</td>
            <td>Pear</td>
            <td>Peach</td>
        </tr>
    </table>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the border property:

<head>
    <script type="text/javascript">
        function SetBorder () {
            var table = document.getElementById ("myTable");
            var input = document.getElementById ("myInput");
            table.border = input.value;
        }
    </script>
</head>
<body>
    <table id="myTable" border="6px">
        <tr>
            <td>Apple</td>
            <td>Pear</td>
            <td>Peach</td>
        </tr>
    </table>

    <input id="myInput" type="text" value="20" />
    <button onclick="SetBorder ();">Set border!</button>
</body>