CSSで任意サイズの枠線を％指定のボックスぴったりに収める

背景

％指定等で枠線をつけると、枠線は対象の外側に引かれるためサイズがぴったりにならない
これの防止をする。

主として健忘症である未来の自分へのメモ

実装

※Chromeでのみ動作確認済み

css

.class{
  --b:5px;                              /* 枠線のサイズ指定 */
  Width:calc(100vw - calc(var(--b)*2)); /* 枠線は左右に2本入るため枠線のサイズかける2をした数を引く */
  Height:calc(50vh - calc(var(--b)*2)); /* 枠線は上下に2本入るため枠線のサイズかける2をした数を引く */
  border: var(--b) solid #fff;          /* 枠線指定 */
}

See the Pen border perfect by hashito (@hashito) on CodePen.

追記

背景

@takamoso 様からコメントを頂き、「そこまでしなくても、box-sizing を使えばできますよ。」とのこと…

調査

box-sizingがわからなかったので調べてみると
「ボックスサイズの算出方法の指定、border-boxに指定すればpaddingとborderの幅を含める」
ということで探していたのはまさにこれです

例／デモ

例としてコードも頂きましたので、下記に転記させていただきます。

div{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 5px solid #f00;
  background: #000;
}

デモ

See the Pen border perfect2 by hashito (@hashito) on CodePen.

@takamoso 様コメントありがとうございました。