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; }
Loading ...
1
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?
Comment by Brent Traut — February 25, 2008 @ 2:19 pm
2
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”.
Comment by Brent Traut — February 25, 2008 @ 2:24 pm
3
@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.
Comment by Chris Coyier — February 25, 2008 @ 2:25 pm
4
Brent asked what I was going to.
It’s great to see the “why”s behind particualr techniques, so thanks.
Comment by Andrea — February 25, 2008 @ 3:09 pm
5
The Hicksdesign link has an extra alias in it
Comment by Tim Nash — February 25, 2008 @ 3:29 pm
6
Thanks Tim, fixed that.
Comment by Chris Coyier — February 25, 2008 @ 3:30 pm
7
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.
Comment by koew — February 26, 2008 @ 11:29 am
8
Maybe you can make it slightly transparent for extra-spiffyness! Divs couldn’t overlap, though.
Comment by André Luís — February 26, 2008 @ 11:59 am
9
hm, why don’t you just use one div with border instead of 4?
Comment by Dejan Cancarevic — February 26, 2008 @ 1:45 pm
10
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;}
Comment by Arjan Terol — February 26, 2008 @ 3:27 pm
11
@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!
Comment by Chris Coyier — February 26, 2008 @ 3:28 pm
12
@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.
Comment by Chris Coyier — February 26, 2008 @ 3:31 pm
13
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!
Comment by Beau — February 26, 2008 @ 3:58 pm
14
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.
Comment by NatalieMac — February 27, 2008 @ 3:25 pm
15
@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.
Comment by Chris Coyier — February 28, 2008 @ 12:25 pm
16
Interesting technique, I’d usually use padding in the same way so it certainly adds to the arsenal of tools available.
Comment by Matt — March 1, 2008 @ 1:21 am
17
Interesting..
Good ..
thanks.
Comment by Bekir Cem — March 1, 2008 @ 1:53 pm
18
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.
Comment by Claudia — March 2, 2008 @ 1:34 pm
19
Thank you for this Css-Trick and i bookmark your Rss-Feed
Ralph
Comment by Ralph — March 7, 2008 @ 7:12 am
20
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
Comment by thinsoldier — March 11, 2008 @ 2:05 pm
21
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
Comment by Andy Ford — March 12, 2008 @ 1:26 pm
22
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.
Comment by Adrian Salceanu — April 18, 2008 @ 12:37 am