[解決済み] ボーダーを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 & 以上 .