Here’s something cool from Chris Coyier—how to create body-border for your pages. If you want to give your pages some degree of sophistication, well, why not try this trick and see for yourself how much it can make your site pretty and stylish!
Body border is basically a stroke of color just inside the entire viewable area, all the way around, in the browser window. It’s sort of an optical illusion you use when your implement this.

Try the Code!
You need four elements, namely:

<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

This trick works great in Firefox, Safari, and Opera, and IE 7.

Really this is one is great stuff which is quite useful if you want uniqueness all over your pages. Why not try it out and see the difference!

This example was taken from http://css-tricks.com/css-trick-creating-a-body-border/

Thank you Chris for your great tricks!

Tags: Check This Out! Body-Border for Your Page