title: How to hide the background underneath the border
body: <p>I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent <code>border</code> and a negative <code>margin</code> of the same size, to not affect the text-flow. Now this works like a charm. But not on elements that have a background. The background spreads out to the transparent border. This is behaviour seams to be consistent among all browsers.</p>
  
  <p><a href="http://jsfiddle.net/hq65C/1/" rel="noreferrer">http://jsfiddle.net/hq65C/1/</a> here a other example: <a href="http://jsfiddle.net/DytDA/" rel="noreferrer">http://jsfiddle.net/DytDA/</a></p>
  
  <p>Why is this? I was always thinking that the border is outside of the element. How could I fix this. (I need a solution that does not require to modify the HTML). </p>