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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > borderColor (frame, frameset, table, ...)

borderColor property (frame, frameset, table, ...)

Browser support:

Sets or retrieves the color of the border.

To manipulate the border of the elements more efficiently, use the border style property.

Syntax:

object.borderColor;

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

This property is read/write.

HTML page for this property: borderColor

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 borderColor attribute:

Code

topFrame.htm

mainFrame.htm

<frameset rows="110,*" cols="*" border="10px" bordercolor="red">
    <frame src="topFrame.htm" name="topFrame" scrolling="No"/>
    <frame src="mainFrame.htm" name="mainFrame"/>
</frameset>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Contents of the top frame</h1>
    May contain menu items or a logo.
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function AddRow (statTable, element, attr, attrValue) {
            if (attrValue == null)
                attrValue = element.getAttribute (attr);

            var row = document.createElement ("tr");
            var nameCell = document.createElement ("td");
            var valueCell = document.createElement ("td");
            nameCell.innerHTML = attr;
            valueCell.innerHTML = attrValue;

            row.appendChild (nameCell);
            row.appendChild (valueCell);
            statTable.appendChild (row);
        }

        function CreateFramesetStat () {
            var statTable = document.getElementById ("frameset_stat");
            var frameSet = window.frameElement.parentNode;

            AddRow (statTable, frameSet, "border");
            AddRow (statTable, frameSet, "borderColor");
            AddRow (statTable, frameSet, "frameBorder");
            AddRow (statTable, frameSet, "frameSpacing");
            AddRow (statTable, frameSet, "cols");
            AddRow (statTable, frameSet, "rows");
        }

        function CreateTopFrameStat () {
            var statTable = document.getElementById ("topframe_stat");
            var frame = parent.frames['topFrame'].frameElement;

            AddRow (statTable, frame, "noResize", frame.noResize);
            AddRow (statTable, frame, "scrolling");
        }

        function CreateMainFrameStat () {
            var statTable = document.getElementById ("mainframe_stat");
            var frame = window.frameElement;

            AddRow (statTable, frame, "noResize", frame.noResize);
            AddRow (statTable, frame, "scrolling");
        }

        function CreateStat () {
            CreateFramesetStat ();
            CreateTopFrameStat ();
            CreateMainFrameStat ();
        }

    </script>
</head>
<body onload="CreateStat ()">
    <table> 
        <thead>
            <tr>
                <th>Frameset</th>
                <th>Top frame</th>
                <th>Main frame</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="frameset_stat">
                        </tbody>
                    </table>
                </td>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="topframe_stat">
                        </tbody>
                    </table>
                </td>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="mainframe_stat">
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to use borderColor attribute in a table:

<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 3:

You can get the borderColor property of the frameset from one of its frames. The code below shows how to implement it.

<script type="text/javascript">
    function GetFramesetBorderColor () {
        var frameSet = window.frameElement.parentNode;
        return frameSet.borderColor;
    }
</script>