WWW FAQs: How do I create a border around the browser window?


2006-07-20: Creating a border around the browser window is done with CSS, of course. But you knew that much - you're asking for the details.

Are you looking for a quick fix? I present a simple example at the end. But beware - there are issues to be aware of here. So I recommend you read carefully. And remember, I didn't create the patchwork of incompatible web browsers out there in the world. So don't blame me if the solution isn't as simple as you'd like!

Ready? OK, here we go. There are two important groups of web browsers in the world today:

1. Internet Explorer 5, 5.5 and 6.

2. Firefox, Opera, Safari, and Internet Explorer 7.

Older, pre-7.0 versions of Internet Explorer have their own nonstandard way of creating a border around the browser window. It's simple, but it's not correct CSS, and it stops working if you try to use a standards-compliant document type. Still, it's the only way to solve the problem for the most popular browser currently out there in the world: Internet Explorer 6.

You'll notice I didn't mention Internet Explorer 4 or Netscape 4. That's because these represent well under 1% of users today, and those using them are generally well aware that they are not able to experience modern websites properly. I don't recommend crippling your web design to suit those who use web browser software from 1996, especially since Firefox is available free of charge as an upgrade path for Windows 95 and 98 users.
The newer browsers, including Internet Explorer 7 and pretty much all of the alternatives, can do it in a more modern way. But that technique won't work for Internet Explorer 6. And with Internet Explorer 7, we must use a standards-compliant document type... which breaks the "old way" of drawing a window border in Internet Explorer 6.

Are we stuck? Of course not. Conditional comments to the rescue!

Conditional Comments and Internet Explorer

Conditional comments are a simple way to write HTML, CSS and JavaScript code that is read only by certain versions of Internet Explorer. You can also decide whether the code should be visible to non-Microsoft browsers or not. This is a good thing because it allows us to work around the Internet Explorer 6 problem. For Internet Explorer 6, we'll set up our page in "quirks mode," without specifying a document type. But for all other browsers, and especially Internet Explorer 7 which requires it, we'll use the HTML 4.01 Strict document type definition (DTD). This tells Internet Explorer 7 that we're writing modern HTML and CSS, and that Internet Explorer 7 shouldn't pretend to be an out of date version of Internet Explorer.

To write code that is visible only to Internet Explorer 7 or newer and all non-Microsoft browsers, we use a conditional comment like this:


<![if gte IE 7]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<![endif]>

What's happening here? The code inside the [ and ] is ignored by non-Microsoft browsers, but Microsoft browsers look here for special commands like if and endif. Everything between these commands is looked at only if the condition is true - in this case, only if the user has Internet Explorer version 7 or better.

For complete information about conditional comments, se Microsoft's "About Conditional Comments" page.

Note: the disadvantage of this approach is that you can't use Internet Explorer 6 in strict mode. Unfortunately the only alternatives involve JavaScript and unattractive "jumpy scrolling" of the border... which, for a mere window border, really isn't worth it! But if you're bound and determined to find a way to do this in IE6 in strict mode, you can find the relevant techniques in the article how do I make a background image fill the entire browser window?

But the jumpy scrolling will look bad, and all you get for that considerable price is a window border. So think twice before going that road.

Doing It The Right Way: Fixed Elements At The Window Edges

The newer browsers, including Internet Explorer 7, support the CSS position:fixed attribute. They also let us size things in terms of the browser window size, regardless of how big the actual document content is. And that allows us to position our borders just the way we want.

But Internet Explorer 6 doesn't support these, and will draw our border div elements in the wrong positions. So we'll set them up the right way... then hide them with another conditional comment if, and only if, we're in Internet Explorer 6 or older.

Here's the CSS style information for the body element and the top border (don't worry, I'll present the whole thing at the end). Note that I'm using a 16-pixel border here, not to be attractive but simply to prove the point. Note also that I make the body element's padding 20 pixels wide, slightly larger than 16 pixels, so that text doesn't butt right up against the border - but you can set them identically if you want to. If you don't set the padding at least as large as the border, though, part of the document will be hidden behind the border.


<style media="screen">
body {
margin:0;
padding:20px;
}

#top {
position:fixed;
background:green;
left:0;
  top:0;
width:100%;
height:16px;
}
</style>

That's the right way to set up the top border in the more modern browsers. But for Internet Explorer 6, we need to hide this border and set it up the old-fashioned, IE-specific way:


<!--[if lte IE 6]>
<style media="screen">
body {
border: solid green 100px;
}
#left,#right,#top,#bottom {
display: none;
}
<![endif]-->

What's going on here? In Internet Explorer 6 and below, a border attribute for the body element is drawn around the edges of the browser window - convenient, but not correct according to modern standards. So we take advantage of this only inside a conditional comment that is specific to old versions of Internet Explorer... and while we're at it, we set the display attribute of our more modern border div elements to none, so that Internet Explorer 6 doesn't show them incorrectly.

Since this entire conditional comment is ignored by Internet Explorer 7 and all non-Microsoft browsers, it doesn't cause any problems for browsers that can handle doing it the "right" way.

By specifying media="screen" we give browsers a chance to understand that this border isn't necessary when printing.

Don't Forget The divs!

One more detail: we need to include the actual div elements for our fancy borders in the page! We can place these anywhere in the body element. Here's the HTML for the top border's div element:


<div id="top"></div>

The Complete Solution

Here's complete code for a simple page with a window border. Notice that the border surrounds the entire inner edge of the browser window regardless of whether the document's actual text is shorter than, equal to or taller than the browser window.

This page renders correctly in Internet Explorer 6, Internet Explorer 7, Firefox, Safari, and Opera 9.


<![if gte IE 7]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<![endif]>
<html>
<head>
<title>Window Border Demo</title>
<style media="screen">
body {
margin:0;
padding:20px;
}
#top,#bottom,#left,#right {
position:fixed;
background:green;
}
#top,#bottom {
left:0;
width:100%;
height:16px;
}
#top {
top:0;
}
#bottom {
bottom:0;
}
#left,#right {
top:0;
height:100%;
width:16px;
}
#left {
left:0;
}
#right {
right:0;
}
</style>
<!--[if lte IE 6]>
<style media="screen">
body {
border: solid green 16px;
}
#left,#right,#top,#bottom {
display: none;
}
<![endif]-->
</style>
</head>
<body>
<h1>Page With Borders</h1>
Your Content Goes Here!
<div id="top"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>

And that's it! You're ready to go with window borders. Just remember that Internet Explorer 6 (and below) will be in quirks mode, so any other CSS code will have to be designed with that in mind. If that seems too high a price to pay, consider shutting off the borders in Internet Explorer 6 with a conditional comment. The popularity of Internet Explorer 7 should grow rapidly once Microsoft makes a final release, and many of your pickiest site visitors are already using one of the alternatives.

Thanks to master web designer Art Delano for his input on this article.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!