Over a million developers have joined DZone.
Platinum Partner

Creating an "Body Border" with CSS

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

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" />

CSS to remove body border:

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


Original article here.

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}