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

2021.10.22

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

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

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;

}

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

ソースコード

関連項目