Simplified page borders in pure CSS

Written by Harry Roberts on CSS Wizardry.

Table of Contents

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.

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

☕️ Did this help? Buy me a coffee!