outline: none;

Posted 7 months, 4 weeks ago at 6:48 pm. 10 comments

Annoying Dotted Border In Action
A friend of mine recently told me about a CSS property to remove the annoying dotted borders surrounding links. It is called outline. If you simply set a { outline: none; } somewhere in your global CSS file, it will remove all of those nasty dotted borders from all of your links. This might be old news to a lot of people, but I sure am glad that I know about it now.

10 Replies

  1. Evan Nov 27th 2007

    Wow, that is a handy bit of info. I’ve always hated those dotted lines, especially when you’re using a layout that includes absolute positioning so that the dotted lines leave your content area, stretching to the sides of the screen. So unsightly.

    Thanks for the tip.

  2. Anand Nov 27th 2007

    Can also be done via js .blur()

  3. mit rezom Nov 28th 2007

    Those outlines are on the blur/focus so that users that are navigating via the keyboard know where their at…

  4. Michael Nov 28th 2007

    @ mit rezom That is a great point, I didn’t really think about that. I’ll need to look into .blur()

  5. Anand Nov 28th 2007

    @mit & @michael

    how many people navigate links via tabbing? the js solution would reset their focus every time they reached it, so thatd actually make things worse. this way its selected just not showing you. you could do :active { color: whatever } or some other way besides outlining, if you were really keen on having that functionality.

  6. Akira117 Dec 9th 2007

    …..told ME about …..
    (not valid html)

  7. Samanta Dec 26th 2007

    Some people do like navigating links in a website via tabbing. It’s kinda pointless, since that’s what your mouse is for. But I don’t think these dotted borders should be seen as a problem, they only appear when you click… and if, let’s say, for some reason you don’t have a mouse and you are navigating, via tabbing, a website with such basic characteristic disabled/hidden, wouldn’t that create an accessibility issue?
    I just think they are harmless, why would one want to hide them? Aren’t they there for a reason?

  8. wildwobby Dec 28th 2007

    Great tip. I made a little javascript app a while back but it was ruined by those nasty things that would end up covering the web page.

  9. Karim Jan 1st 2008

    Think accessibility first :)

    In fact, these dots are very useful for some people.

  10. james Jan 9th 2008

    great method!!!!


Leave a Reply