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

Did you enjoy this? Hire me!

Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.


I am currently accepting new projects for Q1, 2015 Referral scheme


Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Events

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.