title: Javascript - Changing border-width without moving surrounding elements.
body: <p>I have the following HTML: </p>
  
  <pre><code>&lt;div style="float:left;"&gt;
    &lt;h2&gt;Hover:&lt;/h2&gt;&lt;br /&gt;
    &lt;div class="Size" id="160x600" style="margin:10px;float:left;height:600px; width:160px;border:1px solid #90A4AF;text-align:center;position:relative"&gt;
      &lt;div style="position:absolute;top:50%;text-align:center"&gt; Text&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="Size" id="336x280" style="margin:10px;float:left;height:280px; width:336px;border:1px solid #90A4AF;text-align:center;position:relative"&gt;
      &lt;div style="position:absolute;top:50%;text-align:center"&gt;Text&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
  
    &lt;div class="Size" id="728x90" style="margin:10px;height:90px; width:728px;border:1px solid #90A4AF;text-align:center;position:relative"&gt;
      &lt;div style="position:absolute;top:50%;text-align:center"&gt;Text&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following JS that changes border size on hover: </p>
  
  <pre><code>  $('.Size').hover(
    function() {
      $(this).css('borderWidth', '5px');
    },
    function() {
      $(this).css('borderWidth', '1px');
    });
  </code></pre>
  
  <p>The problem is that it's moving elements around it by adding the border-width to the total width of the element. Any suggestions around this? </p>