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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > borderColorDark (table, td, th, tr)

borderColorDark property (table, td, th, tr)

Browser support:

Sets or retrieves the color used to draw the right and bottom borders of a table.

No longer recommended to use. Use the borderColor style property instead.

The borderColorDark property replaces the color specified by the borderColor property. By default this property manipulates the color of the right and bottom borders. Use the borderColorLight property to change the color of the left and top borders.

Syntax:

object.borderColorDark;

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

This property is read/write.

HTML page for this property: borderColorDark

Possible values:

A legal color value. It can be a hexadecimal, RGB or predefined color value. For more information, see the page for colors.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the borderColorDark attribute:

<table border="4px" borderColorDark="green" borderColorLight="blue">
    <tbody>
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
        </tr>
        <tr>
            <td>cell 3</td>
            <td>cell 4</td>
        </tr>
    </tbody>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

// top right bottom left
    // blue cyan cyan blue
<table style="border:4px solid; border-color:#0000FF #00ffff #00ffff #0000FF;">
    <tr>
        <td onclick="ChangeBorder ();">Click this text!</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to change borderColorDark property dynamically:

<head>
    <script type="text/javascript">
        function ChangeDarkColor () {
            var table = document.getElementById ("myTable");
            table.borderColorDark = "red";
        }

        function ChangeLightColor () {
            var table = document.getElementById ("myTable");
            table.borderColorLight = "cyan";
        }
    </script>
</head>
<body>
    <table id="myTable" border="4px" borderColorDark="green" borderColorLight="blue">
        <tbody>
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </tbody>
    </table>
    <button onclick="ChangeDarkColor ();">Change the right and bottom borders!</button>
    <br />
    <button onclick="ChangeLightColor ();">Change the left and top borders!</button>
</body>