Frame Border Width

It's unfortunate that those who take the time to learn about the presentational aspects of web page frames are few and far between and it's even more unfortunate that the default appearance of web page frames is essentially butt-ugly (probably because it's so overused).

However it doesn't have to be so.

There's a number of attributes you can apply to your <frameset> and <frame> tags to modify and (hopefully) improve their appearance and usability.

We'll start with learning how to set the width of your frame borders. (All the examples below will be a modification of the advanced frame layout discussed in more detail on a previous page.)

How to Set the Width of All Frame Borders

To set the width of the all borders in your frame layout, use both the framespacing attribute and the border attribute in the primary <frameset> tag of your frameset document. The value used in each attribute represents the width in pixels. (Note that the frameborder attribute must be either absent or have its value set to "yes".)

Here's the source code of our advanced frame layout tweaked to display borders that are 20 pixels in width:

<html>



<head>

<title>HTML Frames - An Advanced Frame Layout</title>

</head>



<frameset rows="20%,80%" framespacing="20" border="20">



<frame src="header.htm">



<frameset cols="25%,75%">

<frame src="menu_adv.htm" name="menu">

<frame src="chapter1.htm" name="content">

</frameset>



</frameset>



</html>

Here's what it looks like with the width of all borders set to 20 pixels.
Here's what it looks like with normal borders.

How to Set the Width of Some Frame Borders

To set the width of just some but not all frame borders, insert the framespacing and the border attributes in a nested <frameset> start tag.

Here's the source code of our advanced frame layout tweaked to display borders that are 20 pixels in width only between the columns in the bottom frame row:

<html>



<head>

<title>HTML Frames - An Advanced Frame Layout</title>

</head>



<frameset rows="20%,80%">



<frame src="header.htm">



<frameset cols="25%,75%" framespacing="20" border="20">

<frame src="menu_adv.htm" name="menu">

<frame src="chapter1.htm" name="content">

</frameset>



</frameset>



</html>

Here's what it looks like.

Conversely, you could use the framespacing and border attributes in your primary frameset and then use the frameborder="no" attribute/value pair in the nested frameset.

Here's the code:

<html>



<head>

<title>HTML Frames - An Advanced Frame Layout</title>

</head>



<frameset rows="20%,80%" framespacing="20" border="20">



<frame src="header.htm">



<frameset cols="25%,75%" frameborder="no">

<frame src="menu_adv.htm" name="menu">

<frame src="chapter1.htm" name="content">

</frameset>



</frameset>



</html>

And here's what it looks like.

(NOTE: Internet Explorer and Opera support both the framespacing and border attributes while Gecko-based browsers only support the border attribute. It's best to cover all the bases and use both framespacing and border when setting frame border widths.)

How to Remove All Frame Borders

To completely remove all borders in your frame layout, use the frameborder attribute in the primary <frameset> tag of your frameset document and set the value to "no" (default is "yes").

Here's the source code of our advanced frame layout tweaked to display no borders:

<html>



<head>

<title>HTML Frames - An Advanced Frame Layout</title>

</head>



<frameset rows="20%,80%" frameborder="no">



<frame src="header.htm">



<frameset cols="25%,75%">

<frame src="menu_adv.htm" name="menu">

<frame src="chapter1.htm" name="content">

</frameset>



</frameset>



</html>

Here's what it looks like with no borders.
Here's what it looks like with borders.

How to Remove Some Frame Borders

To remove only some frame borders (but not others) in your frame layout, use the frameborder attribute in the <frame> tags of your frameset document and set the value to "no" (default is "yes"). This will remove the borders only from the frames you apply the setting to.

Here's the source code of our advanced frame layout tweaked to display no borders between the columns in the bottom frame row:

<html>



<head>

<title>HTML Frames - An Advanced Frame Layout</title>

</head>



<frameset rows="20%,80%">



<frame src="header.htm">



<frameset cols="25%,75%">

<frame src="menu_adv.htm" name="menu" frameborder="no">

<frame src="chapter1.htm" name="content" frameborder="no">

</frameset>



</frameset>



</html>

Here's what it looks like with no borders between the columns.
Here's what it looks like with borders.

* * *

Next, let's apply some color and learn how to tweak the user controls...

<~ BACK

TOP

NEXT ~>