ページの四隅にボーダー装飾をするCSS

四隅にボーダーが入っているサイトって可愛いですよね。あれどうだったっけな、と探すので備忘録です。

bodyの疑似要素の背景に色を付けています。
上から順に、上下左右のボーダーの太さを設定しています。

ソースコード

html:before,html:after,body:before,body:after{
    content:"";
    background:#374e90; /* ボーダーの色 */
    position:fixed;
    display:block;
    z-index:5;
} 
html:before{
    height:10px;
    left:0;
    right:0;
    top:0;
}

body:before{
    height:10px;
    right:0;
    bottom:0;
    left:0;
}
body:after{
    width:10px;
    top:0;
    bottom:0;
    left:0;
}
html:after{
    width:10px;
    top:0;
    right:0;
    bottom:0;
}