How to hide the dotted border outline on focused elements in HTML, using CSS

While working on a web application for data entry, I had to scour the net for a way to hide the dotted border that appears when an element is focused on a web page. Here are my findings.

First, the obligatory disclaimer – I do understand that the dotted border is for accessibility purposes and should be left in place under normal circumstances. However, in this case we already had a replacement in place – when an element receives focus it is styled differently, using a very distinct background color. And this applies to all elements, regardless of whether they were selected by mouse or keyboard. So the dotted border is redundant, and somewhat distracting.

To further clarify the question, these are the dotted borders I refer to:
and

While the solution needed to be usable across browsers, the target browsers where well defined – modern versions of Firefox and Chrome, and IE 7 or newer. I first came across this question on stackoverflow.com which pointed me to using outline:none. Then this one helped with Firefox compatibility. And then I saw this post which provides a number of different techniques.

I ended up using the following CSS, which seems to cover most bases. As I didn’t see this combination on other sites I thought I would post it myself. It doesn’t apply to the select element in Firefox and IE7. Testing was done on Windows XP.

/* hide the dotted lines around an element when it receives focus */
* { _noFocusLine: expression(this.hideFocus=true); } /* ie7 */
::-moz-focus-inner {border:0;}	                     /* firefox */
:focus {outline:none;}                               /* ie8, chrome, etc */