title: how to prevent shifting when changing border width
body: <p>here is a fiddle.  </p>
  
  <p><a href="http://jsfiddle.net/86juF/1/" rel="noreferrer">http://jsfiddle.net/86juF/1/</a></p>
  
  <p>how do I prevent the elements from appearing to shift on click?</p>
  
  <p>The elements normally have a 1px border but go to a 2px border on click.</p>
  
  <p>In the fiddle you will see this css</p>
  
  <pre><code>.o {
      height: 50px;
      width: 100px;
      border: 1px solid red;
      margin-bottom: 10px;
      font-weight: bold;
      font-size: 16px;
  }
  
  .selected {
      border: 2px solid blue;
  }
  </code></pre>