Control Element Outline Position with outline-offset

I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug where the element outline forced a horizontal scrollbar within its parent, causing the table to look....gross. After a bit of research, I discovered the outline-offset CSS property. Let me show you what it is and how it fixed the outline bug!

The CSS

Assuming you have an element that's focusable (usually via tabIndex), the CSS to adjust the outline is as simple as you would expect it to be:

.tableWidget td {
	outline-offset: 2px;
}

A positive outline-offset moves the offset further outside the element, whereas you can create an inner outline using negative outline-offset:

.tableWidget td {
	outline-offset: -1px;
}

In the case of the bug I mentioned above, using a negative outline-offset fixed the problem because the outline stays within element.

I wasn't aware of the outline-offset property before coming across this issue and I'm certainly glad I know about it now. Removing the outline property is never a good idea because usability and accessibility, so the ability to control its placement relative to the element border is very valuable.