CSS:ウィンドウ全体の内側にボーダーをつける


表示領域の内側に余白を設けた状態で、ボーダーを表示領域に追従させたい。

ウィンドウ全体の少し内側にボーダーをつける方法をメモ。デモはこちら。

bodyいっぱいにボーダーを付けた(ように見える)タイプのものは、ネットで検索すればいくつかの方法がヒットしますが、それではありません。
bodyのサイズよりも少し内側にボーダーを設け、ウィンドウのリサイズにあわせて縦横方向に追従させます。JavaScriptを使えば実現できることは承知していますが、スクリプトに頼らず、CSSで実装できないかと考えました。

解決策

いろいろと試行錯誤した結果、以下の方法で実装できました。
IE8〜、Chrome、Safari、Firefoxで想定通りの挙動を確認しています。
:before擬似要素を使用しますので、IE6〜7ではボーダー自体が表示されませんが、それ以上の問題はありません。

HTML

CSS

補足

内容のない空divができてしまう点が、文法上の問題といえば問題です。
また、ボーダーが最前面になりますので、他の要素を重ねる場合は z-indexでの調整が必要です。