<div id="box1">
    <p>ボックス1(幅500px)</p>
</div>
<div id="box2">
    <p>ボックス2(幅500px＋ボーダー1px)</p>
</div>
<div id="box3">
    <p>ボックス3(幅498px＋ボーダー1px)</p>
</div>

#box1    {
          width: 500px;
          background-color: gray;
}

#box2    {
          width: 500px;
          background-color: gray;
          border: 1px solid black;
}
#box3    {
          width: 498px;
          background-color: gray;
          border: 1px solid black;
}

ボーダーを1px設定すると外側にくっ付きますよってことだけです。