borderを要素の内側に指定する方法

私はborderを要素の内側に引きたいときがよくあります。

例えばスマホサイズのサイトを作っているとき、widthを%で作っているとどうしてもborder分だけ幅が広がっちゃって100%にならない。

もしborderを要素の内側に指定することが出来たら、思い通りのスタイルになるのに…。

というわけでそのとき用にメモを残しておきます。

方法はいくつかありますがよく使う2つはこちら

borderを要素の内側に引いた時に中に入る要素の上に被るパターンと被らないパターンがあります。

これは用途に合わせて使い分けるのが良いと思います。

中の要素に被らないborderを内側に引く方法

私はよくこちらの方法を使います。

.example{
  border: 5px solid gray;
  box-sizing: border-box;
}

borderを引きたい要素に【box-sizing: border-box;】を指定してあげます。

どうなるかというとイメージ的にはこんな感じです。

テキストや中のコンテンツがborderに被ることなく内側にborderを引くことができます。

要素サイズが変わらず内側にborderを引くことができるのも嬉しいですね。

CSSの記述も少なくて済みますのでオススメの記述方法で私はよくこちらを使います。

中の要素に被るborderを内側に引く方法

.example{
  outline: 5px solid gray;
  outline-offset: -5px;
}

要素に被るborderを引きたい場合はoutlineを使います。

outlineは要素を縁取りするプロパティですが、outline-offsetを使ってborderの幅分（上記では5px）をマイナスに指定して内側に入るようにします。

どうなるかというとこんな感じです。

テキストがborderに被っているのが確認できると思います。

イメージとしては要素の内側にborderが上から乗っかってる感じですかね。

borderの色を透過したりして文字を見せたりbackground-imageを指定する場合などに使えると思います。

個人的によく使うスタイルなのでメモしておきます。