Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating an "Body Border" with CSS

DZone's Guide to

Creating an "Body Border" with CSS

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}