Simplified page borders in pure CSS

You may well be familiar with John Hicks’ page borders that he uses on his site. These are a series of fixed position <b> elements that are placed top, right, bottom and left of the viewport over the content, giving the illusion of a fixed border. I wanted to achieve a similar effect recently but, given my militant approach to progressive enhancement, I decided to drop the insemantic markup and fashion a pure CSS alternative. For a live demo please visit suzannahaworth.com.

/*------------------------------------*\
	BORDERS
\*------------------------------------*/

/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
	content:"";
	background:#dad8bb;
	position:fixed;
	display:block;
	z-index:5;
}

/* ...and position them! */
html:before{
	height:10px;
	left:0;
	right:0;
	top:0;
}
html:after{
	width:10px;
	top:0;
	right:0;
	bottom:0;
}
body:before{
	height:10px;
	right:0;
	bottom:0;
	left:0;
}
body:after{
	width:10px;
	top:0;
	bottom:0;
	left:0;
}

Tweet Follow @csswizardry

By Harry Roberts on Saturday, December 18th, 2010 in Web Development. Tags: CSS, Progressive Enhancement | 18 Comments »

18 Responses to ‘Simplified page borders in pure CSS’

Eric said on 18 December, 2010 at 4:43 pm

Great, simple approach! Here’s a demo: http://jsfiddle.net/hrwFn/
Nicolas Gallagher said on 19 December, 2010 at 11:46 pm

You might be interested in an article I wrote about using pseudo-elements as an extra canvas (and keeping content selectable): http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

This is probably a simpler way to achieve the effect you’re after:
```
html:before {
    content:"";
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:10px solid #dad8bb;
}
```
Andy Shaw said on 20 December, 2010 at 12:47 am

Hey Harry,

I agree with your approach of keeping these things css and not messing the html up.

For this particular effect is there any reason why you wouldn’t jut use…
```
body { border:solid 10px #dad8bb }
```
Does the same thing right?
Harry Roberts said on 20 December, 2010 at 10:28 am

@Eric: Cheers for that!

@Nicolas: Whilst that is a lot shorter, it does mean content scrolls over the border, which is pretty unsightly, even more so with images and video and whatnot. Definitely worth knowing though, cheers!

@Andy: The border needs to stay fixed above the page and not scroll with it, if you add the border to the body, it will scroll with it and be as high as the body itself, whereas we want the border to be the height of the browser viewport. This is the actual place I used it: http://suzannahaworth.com/

Nicolas Gallagher said on 20 December, 2010 at 11:07 am

@Harry: Good point; it can still be done with one less pseudo-element.

html:before,
html:after,
body:before {
    content:"";
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:10px solid #dad8bb;
}

html:after {
    z-index:10;
    top:auto;
    border-width:0 0 10px;
}

body:before {
    z-index:10;
    bottom:auto;
    border-width:10px 0 0;
}

Harry Roberts said on 20 December, 2010 at 11:34 am

Impressive :D
Till | iTanum webdesign said on 20 December, 2010 at 1:50 pm

Thanks for the CSS inspiration. It’s nice to talk to others about it and even learn something. I would have certainly solved differently.

BigAB said on 21 December, 2010 at 4:59 pm

Depending on the browsers you want to support, here’s an easy IE8+ solution:

html {
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    border: 10px solid #dad8bb;
}

example: http://jsfiddle.net/BigAB/xDhuS/

BigAB said on 21 December, 2010 at 6:51 pm

I should always test before I post.

Seems I spoke too soon. That “solution” is poor and setting the HTML height means that the bottom border stays fixed at the bottom of screen height even if the content is more than screen height.

Here is something that would work in Chrome/Safari but won’t work in IE or FireFox due to min-height bugs:
```
html {
    height: 100%;
    overflow-y: scroll;
}
body {
    min-height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    border: 10px solid #dad8bb;
}
```
Oh well, good thing the OP has a working solution already.
Greg said on 22 December, 2010 at 3:31 am

Till: do share. ;-)

Thanks Harry, and also Nicolas for slight refactoring. I’ll have to file this one away somewhere!
Joel Turner said on 22 December, 2010 at 4:23 am

Very nice! This is a smooth, clean effect.
krike said on 22 December, 2010 at 10:23 am

Nice tip :)

Submitted on the CMS tutorial site: http://cmstutorials.org/tutorial/view/body_borders_without_markup
Mike Heath said on 22 December, 2010 at 4:33 pm

Doesn’t work right in IE8 – bottom border scrolls up
Nicolas Gallagher said on 23 December, 2010 at 2:36 pm

@BigAB: Your second code example doesn’t produce the same effect because the borders are not fixed to the viewport.

@Mike Heath: You’re right. IE8 doesn’t seem to get {position:fixed;} right with pseudo-elements. It needs a work-around to get something acceptable:

[if IE8]

html:before, html:after, body:before {position:absolute;}
Adam Fairhead said on 7 January, 2011 at 4:06 pm

Interesting read. Bookmarked to read through some more and see what I can take away into production :D
Mark Host said on 4 April, 2011 at 12:17 am

For some reason this isnt working in Chrome 10. The site http://suzannahaworth.com/ just shows up as the background color you have set. Interesting to see why Chrome is doing this… would’ve expected IE to choke.
Jack Osborne said on 24 May, 2011 at 3:27 pm

Mark, I’ve just had a look at the code and it would appear that the code enabling this has been commented out.
Harry Roberts said on 24 May, 2011 at 3:36 pm

Yeah. Important update: Chrome 10 didn’t like this technique so it’s gone… :(

18 Responses to ‘Simplified page borders in pure CSS’

Leave a Reply