【CSS】四つ角にだけ枠線をつける

サンプル

このように、CSS だけで四つ角に枠線を付ける方法。

コード

以下のように書けばOK。

<div class="box">ここにテキスト</div>

.box {
    position: relative;
}
.box:before {
    content: "";
    background-image: linear-gradient(to right, #17172d, #17172d 40%, transparent 40%, transparent 60%, #17172d 60%, #17172d 100%),
        linear-gradient(to right, #17172d, #17172d 40%, transparent 40%, transparent 60%, #17172d 60%, #17172d 100%),
        linear-gradient(to bottom, #17172d, #17172d 40%, transparent 40%, transparent 60%, #17172d 60%, #17172d 100%),
        linear-gradient(to bottom, #17172d, #17172d 40%, transparent 40%, transparent 60%, #17172d 60%, #17172d 100%);
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-position: left top, left bottom, left top, right top;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

40%や60%と書いてあるのをイジると、間隔を調整できると思います。

色や余白も、適宜変更してくださいませ。