Simplified page borders in pure CSS

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

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

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.