18 December, 2010

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
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.

html:before,html:after,body:before,body:after{
    content:"";
    background:#dad8bb;
    position:fixed;
    display:block;
    z-index:5;
}


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