CSS で内側の境界線を設定する

「内側の境界線」は、境界線を付けても要素の指定寸法を保つこと、または要素の端より内側に見える線を描くことを指す場合があります。前者には box-sizing: border-box、くっきりした内側の線には box-shadow: inset、輪郭線を内側へ移動するには負の値の outline-offset を使います。

CSS で box-sizing プロパティを使用して内側の境界線を設定する

box-sizing: border-box を指定すると、要素の padding と境界線が、指定した幅と高さに含まれます。これはサイズの計算方法を制御するもので、要素の内側に独立した線を描くものではありません。幅と高さが200pxの正方形に10pxの赤い境界線を付けるには、box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green; を指定します。外側のボックスは200×200ピクセルのままで、赤い境界線はその領域の一部を占めます。内容と境界線の間に余白が必要なら padding を追加します。既定の content-box では、幅と高さは内容領域の寸法を表すため、余白と境界線を加えると外側の寸法も大きくなります。border-box は、コンポーネントを決められたレイアウト寸法に収めたい場合に便利ですが、適切な境界線の太さを選ぶ必要は変わりません。

次の自己完結した JavaScript の例は、同じサイズ設定と境界線を含む HTML を出力します。

const html = '<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>';
console.log(html);

<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>

出力されたマークアップを HTML 文書に貼り付けると、寸法が固定された正方形を確認できます。

CSS で box-shadow プロパティを使用して内側の境界線を設定する

要素のレイアウト上のサイズを変えずに見える線を付けたい場合は、box-shadow に inset を指定します。幅と高さが200pxの緑色の正方形に10pxの赤い線を付けるには、次の CSS を <div>Content</div> に指定します。<div style="width: 200px; height: 200px; background: green; box-shadow: inset 0 0 0 10px red;">Content</div>。影の最初の2つの値は水平方向と垂直方向のオフセットです。この例ではどちらも0なので、線は各辺で均等になります。3つ目の値はぼかしの量で、ここでは輪郭をくっきりさせるために0を指定しています。4つ目の値は拡張量で、この例では線の太さを決めます。inset は影をボックスの内側に描画します。色や拡張量を変えると見た目を調整できます。ぼかしと拡張量は、どちらも既定値が0のため、適切な場合は省略できます。影はレイアウト領域を確保しないため、近くの要素の位置は変わりません。境界線も設定している場合、その境界線は残り、内側の影の一部を覆うことがあります。

CSS で outline および outline-offset プロパティを使用して内側の境界線を設定する

輪郭線は要素の周囲に描画され、レイアウト上の領域を占めません。緑色の背景を持つ、幅と高さが200pxの <div>Content</div> に outline: 5px solid red; outline-offset: -5px; を指定すると、赤い輪郭線を内側へ移動できます。負のオフセットは、輪郭線を外側の端から内容側へ引き寄せますが、輪郭線を境界線に変えるものではありません。輪郭線は要素の上に描画されるため、端に近いテキストやほかの内容と重なることがあります。重なっても問題ない場合にこの方法を使い、要素の描画領域内に収まる内側の線が必要なら box-shadow を選びます。