Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Control Element Outline Position with outline-offset

By  on  

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!

View Demo

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.

View Demo

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.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

  • By
    MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...

Discussion

  1. Emad Elsaid

    good tip, i don’t use the outline property at all, i always use the border property, didn’t know that outline property is so common in design, or it isn’t ?

  2. jon

    One reason that it may not be used as much may be due to its not being supported in IE8, not sure about IE9 (doesn’t work with my CMS).

    • Alex

      Use the Tab button :)

  3. Vivek

    I was just checking this on Chrome 35.0.1916.153 version. The offset doesn’t seem to be working. It only worked on the firefox 29.0.1. Is there any quick hack to fix this on chrome and keep the offset (blue border line) in chrome with a negative value?

    thanks.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!