Get rid of that dotted border

Many times, when you click on someone’s logo, you see that little dotted border around the image when you click it. I think it looks sloppy.

There is an easy CSS fix for this:

a { outline: none; }

Try it.

This entry was written by Andrew Mager, posted on June 18, 2008 at 1:08 pm, filed under Presentation, Standards and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

16 Comments

  1. Kevin Cupp
    Posted June 19, 2008 at 9:49 pm | Permalink

    That’s a great tip, I didn’t even know it could be turned off. I just implemented it on my blog because I was getting this ugly green border when I clicked a link in my sidebar. Thanks!

  2. Andrew McCloud
    Posted June 21, 2008 at 1:35 am | Permalink

    I had to share this bit of code with a friend a couple of days ago.

    I was wondering If I could possibly be a writer for this blog. I noticed in your footer that you guys are willing to let others join in and share their tips.

  3. Brice
    Posted June 23, 2008 at 3:10 am | Permalink

    The only thing is that you screw up the tabbing order for keyboard freak.

  4. Andrew Mager
    Posted June 24, 2008 at 9:13 am | Permalink

    Andrew, yes. Send me an email: mail@andrewmager.com

    I will get you an account.

  5. Todd
    Posted June 26, 2008 at 3:33 pm | Permalink

    It may be a nuisance to most users, but it is very helpful for those with impairments. It is bad to do as far as accessibility goes. I don’t shut off outline for links anymore.

  6. Yep
    Posted July 23, 2008 at 4:33 pm | Permalink

    Yep, great tip. Damn, how did that scape my mind. :)

    -Yep

  7. Yep
    Posted July 23, 2008 at 4:33 pm | Permalink

    Ok, was going to type a comment, the captcha sucks. Way to much for this site.

  8. Yannis
    Posted July 24, 2008 at 5:08 pm | Permalink

    Cool tip. I was just looking for this!

  9. Big Fish
    Posted July 25, 2008 at 9:12 am | Permalink

    I just implemented this on my site! Thanks!

  10. Bryan
    Posted July 25, 2008 at 2:38 pm | Permalink

    Yet another thing you have no business removing. This is not print media, websites are meant to interact with the user. That means showing focus on selected items.

  11. Isa
    Posted July 25, 2008 at 4:29 pm | Permalink

    Found that:
    a:active {outline: 0;}
    Is slightly more effective for FF3 and up as well as EI7.

  12. Matt
    Posted August 23, 2008 at 9:03 pm | Permalink

    Yes, outlines are meant to show focus. Removing them breaks accessibility. Bad.

  13. Scarf*oo
    Posted August 25, 2008 at 3:46 am | Permalink

    Heh, I didn’t know about this one, thanks!

  14. http://css-edge.blog
    Posted August 27, 2008 at 9:34 am | Permalink

    thanks for sharing!
    http://css-edge.blogspot.com/

  15. ejr
    Posted October 4, 2008 at 1:00 am | Permalink

    nice tip my dear friend

  16. Miles Clark-Wallace
    Posted October 15, 2008 at 9:41 am | Permalink

    Thank you so much for this, much easier that I would have thought.

2 Trackbacks

  1. By Rid of dotted border from image my.bookmarks on July 26, 2008 at 12:31 am

    […] Many times, when you click on someone’s logo, you see that little dotted border around the image when you click it. I think it looks sloppy. (full story) […]

  2. By edowsmho on October 20, 2008 at 1:39 am

    edowsmho…

    edowsmho…

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*
vpn service