css - How to hide the background underneath the border

Question

I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent border and a negative margin 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.

http://jsfiddle.net/hq65C/1/ here a other example: http://jsfiddle.net/DytDA/

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).

Answer 1

How about background-clip: padding-box;?

Demo