Chris has posted 24 posts at DZone. You can read more from them at their website. View Full User Profile

Creating an "Body Border" with CSS

02.26.2008
| 13846 views |
  • submit to reddit
Hicksdesign has been "fiddling" with their site design. The new design features what someone called in the comments a "Body Border". It's basically a stroke of color just inside the entire viewable area, all the way around, in the browser window. I thought it was a nice touch and a pretty spiffy little CSS trick so I thought I'd feature how it was done here.

Check out the EXAMPLE PAGE.

The Code



Four unique page elements are neccecery. Div's work fine for this:

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>


Here is the CSS for them. Notice how clean the CSS can be. Some properties are shared by all of the elements, some by only the top/bottom and left/right, and some unique to themselves. This CSS is coded like that, instead of repeating properties and values unnecessarily.

#top, #bottom, #left, #right {
	background: #a5ebff;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 15px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 15px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }


Browser Compatibility



Works great in Firefox, Safari, and Opera, and IE 7. Does it work in IE 6 (or below)? Of course not! Mostly has to do with positioning. IE 6 doesn't love fixed positioning and the hacks I find ugly and not terribly reliable. The solution is just to ditch the body border for IE:

Header HTML for conditional stylesheet (put comment tags around this in use):

[if lte IE 6]>
    <link href="/ie6.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]


CSS to remove body border:

#top, #bottom, #left, #right { display: none; }


bodyborder.png

Original article here.
Published at DZone with permission of its author, Chris Coyier.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Michael Ott replied on Thu, 2008/02/28 - 5:38pm

This should work instead:

html {
margin:0px;
border:solid 10px #a5ebff;
height:100%;
}

Chris Coyier replied on Thu, 2008/02/28 - 6:56pm

The problem with doing it that way Michael is that you don't get the bottom border when your page content expands beyond the viewable area (scrolls).

Michael Ott replied on Thu, 2008/02/28 - 7:05pm in response to: Chris Coyier

Yeah good spotting. Just tried it now. I should have tested before I posted :-) But I was close!

I still reckon there is an easier way to do it (less code) so I might play around with the idea today.

Cheers! 

Rachael Deja replied on Fri, 2012/09/28 - 4:55pm

I can't seem to get it working on IE, yet yours works in IE so what am I doing wrong? 

There aren't any borders on the side.. this is what it looks like on the bottom of the page:

 

  

I want the beige to be the left and right borders. 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.