title: CSS outline using CSS border
body: <p>Sadly, CSS outline isn't supported in IE7, so i'm stuck using border. But adding a border to any element on the page takes up room and possibly shifts the page.</p>
  
  <p>If i'm adding a 2px border, then I set a -2px margin, it sill isn't perfect, as list items move to the left, and "margin:auto" really screws with it.</p>
  
  <p>You can see examples here:</p>
  
  <p><a href="http://paul.slowgeek.com/nodeSelector/tests/simple.html" rel="nofollow noreferrer"><a href="http://paul.slowgeek.com/nodeSelector/tests/simple.html" rel="nofollow noreferrer">http://paul.slowgeek.com/nodeSelector/tests/simple.html</a></a></p>
  
  <p><a href="http://paul.slowgeek.com/nodeSelector/tests/center1.html" rel="nofollow noreferrer"><a href="http://paul.slowgeek.com/nodeSelector/tests/center1.html" rel="nofollow noreferrer">http://paul.slowgeek.com/nodeSelector/tests/center1.html</a></a></p>
  
  <p>For example, if a page had :</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;Lorem Ipsum&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then I did :</p>
  
  <pre><code>&lt;div&gt;
      &lt;p style="border: 5px solid red"&gt;Lorem Ipsum&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The page would now be 10 px bigger and the p element would be 5 pixels indented. But if i did :</p>
  
  <pre><code>&lt;div&gt;
      &lt;p style="outline: 5px solid red"&gt;Lorem Ipsum&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in firefox 3, the page would be the exact same height and the element would be in the same position. I want this behavior to work cross browser.</p>
  
  <p>Basically, how can you use a CSS border to get the effect of a CSS outline?</p>