大阪市西区　Wild Cards ワイルドカーズ

このサンプルのように、borderで指定した幅は通常そのままwidthの幅にプラスされます。

これの何が困るかと言いますと、たとえば要素を%で指定したレスポンシブデザインなんかだとborderの幅の分だけハミ出るわけです。ネガティブマージンで対処してもいいんですが、美しくないし面倒だし、忘れた頃に修正が必要になったら大変。

そこで役に立つのがbox-sizingプロパティ　どーん！

.inner {
    width: 100%;
    color: white;
    background: black;
    border-left: 5px solid red;
    box-sizing: border-box;
}