境界線をdivの端ではなくdivの内側に配置する

私が持っている<div>要素を、私はそれに国境を載せていきたいと思います。私は書くことができることを知っていますがstyle="border: 1px solid black"、これはdivのどちらかの側に2pxを追加しますが、これは私が望むものではありません。

私はむしろこの境界線をdivの端から-1pxにしたいと思います。div自体は100px x 100pxであり、境界線を追加する場合、境界線を表示するためにいくつかの数学を実行する必要があります。

境界線を表示させ、ボックスが100px（境界線を含む）であることを確認する方法はありますか？

box-sizingプロパティをborder-box次のように設定します。

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

IE8以上で動作します。

次のようにボックスシャドウを使用することもできます。

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

ここの例：http : //jsfiddle.net/nVyXS/（ホバーで境界線を表示）

これは、最新のブラウザでのみ機能します。例：IE 8サポートなし。 詳細については、caniuse.com（ボックスシャドウ機能）を参照してください。

おそらく答えは遅れていますが、私の発見と共有したいと思います。私はこの問題に対する2つの新しいアプローチを見つけましたが、ここでは答えに見つかりませんでした。

box-shadowCSSプロパティによる内側の境界

はい、ボックスシャドウは、要素にボックスシャドウを追加するために使用されます。ただしinset、シャドウのように内部境界線のように見えるシャドウを指定することもできます。水平と垂直の影をに設定し0px、の " spread"プロパティbox-shadowを必要な境界線の幅に設定するだけです。したがって、10pxの「内側」の境界線については、次のように記述します。

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

以下は、ボーダーと「通常の」ボーダーの違いを示すjsFiddleの例ですbox-shadow。このようにして、ボーダーとボックスの幅は、ボーダーを含めて合計100pxになります。

ボックスシャドウの詳細：ここ

アウトラインのcssプロパティを介した境界線

これは別のアプローチですが、この方法では境界線はボックスの外側になります。ここでの例。例からわかるように、css outlineプロパティを使用して、要素の幅と高さに影響を与えないボーダーを設定できます。この方法では、境界線の幅は要素の幅に追加されません。

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

概要の詳細：ここ

Yahoo! これは本当に可能です。見つけた。

下枠の場合：

div {box-shadow: 0px -3px 0px red inset; }

上枠の場合：

div {box-shadow: 0px 3px 0px red inset; }

擬似要素を使用：

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

を使用し::afterて、選択した要素の仮想の最後の子をスタイリングします。contentプロパティは、匿名の置換された要素を作成します。

親を基準とした絶対位置を使用して疑似要素を格納しています。次に、メイン要素の背景にカスタムの背景や枠を自由に配置できます。

このアプローチは、の使用とは異なり、メイン要素のコンテンツの配置には影響しませんbox-sizing: border-box;。

この例を考えてみましょう：

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

ここで、.button幅は親要素を使用して制約されます。を設定border-left-widthすると、コンテンツボックスのサイズが調整され、テキストの位置が調整されます。

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

疑似要素アプローチを使用しても、コンテンツボックスのサイズには影響しません。

アプリケーションによっては、疑似要素を使用するアプローチが望ましい動作である場合とそうでない場合があります。

この質問はbox-shadowとoutlineプロパティを使用したソリューションですでに十分に回答されていますが、ここに上陸して（私のように）オフセットのある内側の境界のソリューションを探しているすべての人のために、これについて少し拡張したいと思います

たとえば、100px x 100pxの黒divがあり、5pxの内部オフセット（たとえば）がある白い境界線でそれをはめ込む必要があるとしましょう。これは、上記のプロパティでも実行できます。

ボックスシャドウ

ここでの秘訣は、複数のボックスシャドウが許可されていることを知ることです。最初のシャドウが上にあり、後続のシャドウはZオーダーが低くなっています。

その知識があれば、ボックスシャドウ宣言は次のようになります。

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

基本的に、その宣言が言っていることは、最後の（10px白）影を最初にレンダリングし、次にその上の前の5px黒影をレンダリングします。

アウトラインオフセット付きのアウトライン

上記と同じ効果の場合、アウトライン宣言は次のようになります。

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

注意： それが重要な場合、outline-offset IEはサポートしていません。

Codepenデモ

通常のを使用する代わりに、プロパティoutlineを使用outline-offsetして負の値を指定するとborder、私にとってはうまくいきます：

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

これは少し古いことは知っていますが、「border inside」というキーワードが直接ここに到達したので、ここで言及する価値のあるいくつかの発見を共有したいと思います。ホバー状態に境界線を追加していたとき、OPが話している効果がわかりました。境界線は、ボックスをびくびくさせた寸法にピクセルを広告します。IE7でも機能する、これに対処する方法が2つあります。

1）要素に既に境界線が付いていて、色を変更するだけです。このようにして、数学はすでに含まれています。

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2）ボーダーを負のマージンで補正します。これはまだ余分なピクセルを追加しますが、要素の配置はびくびくしません

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

新しいブラウザと古いブラウザの間で一貫したレンダリングを行うには、外側に幅を、内側に境界線を付けた二重コンテナを追加します。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

これは明らかに、余分なマークアップよりも正確な幅が重要な場合のみです。

box-sizingを使用する場合：border-boxは、ボーダー、パディング、マージンなどだけではないことを意味します。すべての要素は、親要素の内側に入ります。

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

@Steveのような最高のクロスブラウザーソリューション（主にIEサポート用）は、divの周囲に1pxの境界線を追加するのではなく、幅と高さを98pxにすることです。

あなたはオフセットでアウトラインを見ることができますが、これはあなたのdivに存在するためにいくつかのパディングを必要とします。または、ボーダーdivを絶対に配置することもできます。

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

必要に応じて、偽の境界線divのマージンに合わせて調整する必要がある場合があります。

より最新のソリューションは、css variablesとを使用することcalcです。calcは広くサポートされていますvariablesが、IE11ではまだサポートされていません（ポリフィルが利用可能）。

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

これはいくつかの計算を使用しますが、元の質問はそれを避けようとしていました。計算はcss自体によって制御されるため、計算を使用するのはこれで十分です。また、追加のマークアップや、後で必要になる可能性のある他のcssプロパティを悪用する必要もありません。

この解決策は、高さを固定する必要がない場合にのみ役立ちます。

上記で説明しなかった1つの解決策は、入力にパディングがある場合です。これは、99％の時間です。あなたはの線に沿って何かをすることができます...

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

これについて私が気に入っているのは、両側にボーダー+パディング+トランジションプロパティの完全なメニューがあることです。