CSS Trick: Creating a Body-Border
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; }
It’s probably worth noting that this process is really only useful if you want a fixed-width/height border on a page where content won’t necessarily fill the page. Otherwise, wouldn’t it make waaay more sense to just wrap all content in a div, give it “margin: 10px” and change the page background to your border color / style?
Oh, I see. I misread that they wanted the border through all viewable area. In this case, I still say it’d be better to use a #page-container div rather than assembling the border with divs. Again, if you can ensure enough content on every page to fill out a browser window, the page-container can use “overflow: auto”.
@Brent: That’s pretty smart thinking, but the problem with doing it that way is that you won’t get the bottom border if the page has enough content that it scrolls. This way you get all four borders no matter what.
It is also worth noting that because these div’s are absolutely positioned they automatically get stacked higher vertically (z-index) than anything else on the page that isn’t absolutely positioned. So, they will “cover up” anything below them.
Brent asked what I was going to. :) It’s great to see the “why”s behind particualr techniques, so thanks.
The Hicksdesign link has an extra alias in it :D
Thanks Tim, fixed that.
Here’s some additional information: The frame, or box-border, was used in a design and published in the CSS Zengarden-book called “The Zen of CSS Design: Visual Enlightenment for the Web”, and you can view the awesome design at this url:
http://www.csszengarden.com/?cssfile=069/069.css (by: Mike Davidson)
Try to scroll and notice the frame follows.
Maybe you can make it slightly transparent for extra-spiffyness! Divs couldn’t overlap, though.
hm, why don’t you just use one div with border instead of 4?
Have not test this yet, but should do okay:
html {background-color:#5a5a5a;height:100%}
body {margin:10px;background-color:#fff57a;height:100%;border:8px inset #ff6e73;}
@Dejan: You can get it to LOOK right with one div with a border, just set each of top/bottom/left/right to 0px and apply a fixed position and border. But that will break the entire layout!
See, since absolutely positioned items are, by default, placed above in the vertical stacking order (z-index), that div will be above everything else on the page. Even with a transparent background color, it will still be “on top” which will deaden any links and make text un-selectable. Not good!
@Arjan: More smart thinking there, but that way will also not get you the bottom border if your page content exceeds the browser window vertically and needs to scroll.
I was thinking “couldn’t you just use a wrapper div for this” but I see that you want that bottom border always to show. Instead of using 4 divs for the border though, couldn’t you use a wrapper div and set the borders for top, left, and right, then just use an absolutely positioned div for your bottom border? That might make the CSS even simpler, and cut down on some markup!
I just tried this:
and it gives me a bottom border whether my content scrolls or not in both IE and FF. No extra markup at all.
The only small problem is that if there is not enough content to make the page scroll, the page’s actual height is 100% + 20px since the border gets added to the height.
@NatalieMac: This looks to me like it pushes the bottom border off the viewable area no matter what. Still an interesting idea… I think we are onto a way to do it with less markup here though. If we can do the top, right, and left borders this way and then just do a fixed bottom border, that would be only one empty div needed, much better.
Interesting technique, I’d usually use padding in the same way so it certainly adds to the arsenal of tools available.
Interesting..
Good ..
thanks.
koew,
I couldn’t see a reason for wanting this until I looked at the example you gave at http://www.csszengarden.com/?cssfile=069/069.css
That is seriously beautiful.
Thank you for this Css-Trick and i bookmark your Rss-Feed ;)
Ralph
I have a dream.
div#viewportBorder {
position:absolute;
top:0; left:0;
width: 100%; height: 100%;
border: 5px solid red;
clickthrough: true;
}
just 1 div
Seems to work in ff/mac, not tested in other browsers/os.
Oh, looks like you actually don’t need ‘position: relative’ on the body element with the css i posted… anyway, my solution may not be the magic bullet, but i think is worth throwing into the mix
Hi
As interesting as the effect may be if used properly, it should be pointed out that the four divs have absolutely no semantical or structural meaning whatsoever – so, that’s a big “no no!”. But if used to progressively enhance the markup, it could come up really sweet. Thanks for sharing it with us.
Agree entirely with Adrian, semantics should play presidence not the styling as CSS should merely compliment your markup. Firstly try to use the markup already used, and if that’s not suitable then do it this way.
There are several techniques to attain this effect with less markup but my instincts say that this one would encounter less issues.
Thanks for sharing mate
Ahhhh, the “semantics” folks. They always come along and punch holes in otherwise great design ideas. I’m no usability or semantics expert, but is it always necessary to consider semantically coding your layouts all the time? I just don’t understand why it’s such a big “no-no” to not have them on your mind every time you write CSS. Is it really going to have such a negative impact that it will ruin the experience for the visitor? I’d probably catch hell from these folks for saying all this, but c’mon, easy with the perfectionism all the time.
Anyhow, on a totally different note, I wanted to say that your website is easily among my top-10 favorites to peruse, and the design is simply genius! I’ve always loved this site – keep up the good work!
Coby, if there’s not reason to use semantic/meaningful code you could just use a table for things like this. However, a table wouldn’t be logical since you (probably) won’t be displaying tabular data inside the border.