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
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

  • By
    Create Spinning Rays with CSS3 Animations & JavaScript

    Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt...

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

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!