Strange Progress Bar Behavior offsetwidth

Question

I started developing a simple progress bar using vanilla JavaScript. As far as grabbing a width set in CSS the only way I found with JS is to use .offsetWidth - The following is the code for the functionality demo I was beginning to setup. The fiddle link is at the bottom of the question.

HTML:

<section id="box"></section>
<p>
<section id="box2"></section>

CSS:

#box, #box2 {
height: 10px;
width: 5px;
background-color: lightBlue;
}
#box2 {
width: 4px;
}

JavaScript (onload) :

var savedwidth = document.getElementById("box").offsetWidth;
alert("box 1 width " + savedwidth);
savedwidth = document.getElementById("box2").offsetWidth;
alert("box 2 width " + savedwidth);

While testing it out to see if it grabbed the property accurately I noticed that when the width was set to 5px it returned 6px. Everything else seems fine. 4px = 4px, 6px = 6px.

I was curious if anyone knew why that happened? It's minimal enough where it won't affect what I'm trying to do seemingly, but the more you know the better off you'll be.

FIDDLE : http://jsfiddle.net/5yk9e5du/