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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > frameBorder (frame, frameset, iframe)

frameBorder property (frame, frameset, iframe)

Browser support:

Sets or retrieves whether the frame is surrounded by a 3-D border.

Note that the value of the frameBorder property affects the border of the frame element in Firefox, Opera, Google Chrome and Safari, while in Internet Explorer it specifies whether a client border should be displayed around the document window of the frame. In other words, the border and the frameBorder of the frame are different in Internet Explorer, the frameBorder is placed within, while the border is placed around the padding of the frame.

If you need to get the width of the frameBorder dynamically:

In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, use the getComputedStyle method on the frame to get its computed style, then use the borderLeftWidth, borderTopWidth, borderRightWidth and borderBottomWidth properties of the computed style.
In older Internet Explorer versions (and optionally in newer versions as well), use the clientLeft and clientTop properties of the frame's documentElement.

See Example 3 for details.

Note that Internet Explorer does not allow modifying the frame border after the frame has been inserted into the document. Although the value of the frameBorder property can be changed, it will not modify the appearance of the frame.

Syntax:

object.frameBorder;

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

This property is read/write.

HTML page for this property: frameBorder

Possible values:

String that sets or retrieves the state of the border.

One of the following values:

No border is drawn.

Default. Frame border is drawn.

No border is drawn.

yes

Frame border is drawn.

Default: 1.

Example HTML code 1:

This example illustrates the use of the frameBorder attribute:

Code

frame_noborder.htm

frame_border.htm

<iframe src="frame_noborder.htm" frameborder="0"></iframe>
<br /><br />
<iframe src="frame_border.htm" frameborder="1"></iframe>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>A frame without border.</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>A frame with border.</h1>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the frameBorder property:

Code

frame_noborder.htm

frame_border.htm

<head>
    <script type="text/javascript">
        function GetFrameBorders () {
            var iframes = document.getElementsByTagName ("iframe");
            for (var i = 0; i < iframes.length; i++) {
                var frame = iframes[i];
                alert ("The frameBorder property of the " + (i+1) + ". frame is: " + frame.frameBorder);
            }
        }

    </script>
</head>
<body>
    <iframe src="frame_noborder.htm" frameborder="0"></iframe>
    <br /><br />
    <iframe src="frame_border.htm" frameborder="1"></iframe>
    <br /><br />
    <button onclick="GetFrameBorders ()">Get frame borders</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>A frame without border.</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>A frame with border.</h1>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to get the widths of frame borders:

Code

frame_noborder.htm

frame_border.htm

<head>
    <script type="text/javascript">
        function GetFrameBorderWidths () {
            var iframes = document.getElementsByTagName ("iframe");
            for (var i = 0; i < iframes.length; i++) {
                var frame = iframes[i];
                if (window.getComputedStyle) {  // all browsers, except IE before version 9
                    var style = window.getComputedStyle (frame, null);
                    var leftBorder = style.borderLeftWidth;
                    var topBorder = style.borderTopWidth;
                }
                else {  // Internet Explorer before version 9
                    var docElem = frame.contentWindow.document.documentElement;
                    var leftBorder = docElem.clientLeft + "px";
                    var topBorder = docElem.clientTop + "px";
                }

                alert ("The left and top borders of the " + (i+1) + ". frame are: " + leftBorder + ", " + topBorder);
            }
        }

    </script>
</head>
<body>
    <iframe src="frame_noborder.htm" frameborder="0"></iframe>
    <br /><br />
    <iframe src="frame_border.htm" frameborder="1"></iframe>
    <br /><br />
    <button onclick="GetFrameBorderWidths ()">Get the widths of frame borders</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>A frame without border.</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>A frame with border.</h1>
</body>
</html>