Simplified page borders in pure CSS

Written by Harry Roberts on CSS Wizardry.

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;
}

Did this help? We can do way more!