title: How can I get the :focus outline around an image link to not cut it off?
body: <p>I'm trying to change the look of the focus outline for when someone is tabbing through the website.  The CSS I'm using is below:</p>
  
  <pre><code>:focus { outline: solid 6px orange; outline-offset: 3px }
  </code></pre>
  
  <p>The image link is generated using the below html:</p>
  
  <pre><code>&lt;A href="http://www.google.com"&gt;&lt;IMG src="http://us.usablenet.net/mt/a/hyatt.com/l1398691219000/icons/info.png"&gt;&lt;/A&gt;
  </code></pre>
  
  <p>However for a link that has an image, this style is cutting through the image instead of around it.
  I can't post images, but here is the imgur link to the related screenshots taken from when I was trying to debug the issue on the Tryit Editor from w3schools</p>
  
  <p><img src="https://i.stack.imgur.com/78M7y.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/8T81G.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/37YGV.png" alt="enter image description here"></p>
  
  <p>jsFiddle <a href="http://jsfiddle.net/k6vsckue/" rel="nofollow noreferrer">http://jsfiddle.net/k6vsckue/</a></p>