CSSで四隅に枠をつけたい

ブロックの四隅にだけ枠（border）をつけたいと思いました。

イメージは以下のような感じ。

「四隅に枠」のイメージ

最初は、途中でborderの色を変えればいいのかな？　と思いました。 でも、四隅に小さい四角を用意して、 position: absolute で配置すればいいと気付きました。

イメージは以下のような感じ。

実装イメージ

結果

うまくいきました！！

【HTML（pug）】

.box
  .box-border.box-border-leftTop
  .box-border.box-border-leftBottom
  .box-border.box-border-rightTop
  .box-border.box-border-rightBottom

【CSS（stylus）】

.box
  &-border
    position absolute
    width 20px
    height 20px
    &-leftTop
      border-top 2px solid #B4A8A5
      border-left 2px solid #B4A8A5
      top -1px
      left -1px
    &-leftBottom
      border-left 2px solid #B4A8A5
      border-bottom 2px solid #B4A8A5
      bottom -1px
      left -1px
    &-rightTop
      border-top 2px solid #B4A8A5
      border-right 2px solid #B4A8A5
      top -1px
      right -1px
    &-rightBottom
      border-right 2px solid #B4A8A5
      border-bottom 2px solid #B4A8A5
      right -1px
      bottom -1px

できたもの

「四隅に枠」できあがり