【CSS】borderを内側に引く方法

Webサイトのデザインをしていると、テキストボックスやボタンなどの要素の枠線を内側に引きたいと思うことがあります。今回は、CSSでborderを内側に引く方法を2つご紹介します。

ボックスシャドウを使う方法

ボックスシャドウの「inset」プロパティを使うことで、内側に枠線を描くことができます。ボックスシャドウとは、要素の周囲に影をつけるプロパティです。inset属性を使うことで、影を内側に描くことができます。

.box {
  border: 1px solid #000;
  box-shadow: inset 1px 1px 1px #fff;
}

このコードを適用すると、以下のようになります。

擬似要素を使う方法

インラインブロック要素の前に擬似要素を使って、その要素の内側に枠線を描くことができます。擬似要素とは、要素の外観を変更するためのプロパティです。

.box {
  display: inline-block;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  width: 100%;
  height: 100%;
}

このコードを適用すると、以下のようになります。

どちらの方法を使うべきか

どちらの方法を使うかは、目的によって異なります。

ボックスシャドウを使う方法は、比較的簡単に内側に枠線を描くことができます。ただし、ボックスシャドウの設定によっては、要素のサイズが大きくなってしまうことがあります。

擬似要素を使う方法は、ボックスシャドウを使う方法よりも、要素のサイズが大きくなることはありません。ただし、擬似要素を使わなければならないため、コードが長くなってしまいます。