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

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

borderColorLight property (table, td, th, tr)

Browser support:

Sets or retrieves the color used to draw the left and top borders of a table.

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

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

Syntax:

object.borderColorLight;

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

This property is read/write.

HTML page for this property: borderColorLight

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 borderColorLight 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 borderColorLight 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>