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!

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.

Recent Features

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Comment Preview Using MooTools

    Comment previewing is an awesome addition to any blog. I've seen really simple comment previewing and some really complex comment previewing. The following is a tutorial on creating very basic comment previewing using MooTools. The XHTML You can set up your XHTML any way you'd like.

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

Discussion

  1. 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. 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!