389 posts I <3 WordPress
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Most Wanted Bounty Winner
  • Won a Competition
  • Has been a member for 5-6 years
  • Grew a moustache for the Envato Movember competition
  • United States
+5 more
BoxyStudio says

I don’t know if you’re like me and are annoyed by the little things, but one of those things is that stupid dotted border you get when you click a linked image or a text navigation block, etc. If you’ve seen it, you know what I mean.

Here’s how you get rid of it: :)

a:active, a:focus { outline:none }

That’s always something I include in the top of my CSS files because, well, it’s just annoying to me. ;)

10 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 100 and 1 000 dollars
  • United States
Tyler_K says

I feel your pain! I personally tend to simplify it down to “a { outline: 0; }” in my CSS files :)

It definitely should be in everyone’s CSS file(s), especially if you’re doing something like a coda slider or using some other button that doesn’t cause a page refresh.

68 posts
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 6-7 years
  • Referred between 200 and 499 users
  • Sold between 10 000 and 50 000 dollars
rblalock says

Great reminder!!!!! It is annoying! (though doesn’t it only show up in Firefox?)

389 posts I <3 WordPress
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Most Wanted Bounty Winner
  • Won a Competition
  • Has been a member for 5-6 years
  • Grew a moustache for the Envato Movember competition
  • United States
+5 more
BoxyStudio says
I feel your pain! I personally tend to simplify it down to “a { outline: 0; }” in my CSS files :)

Haha, good point. I tend to overthink it sometimes. Thanks :)

And yes, I think it’s just Firefox that does it.

21 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 6-7 years
  • Referred between 10 and 49 users
  • Sold between 1 000 and 5 000 dollars
fuski says

I also find it alittle annoying and remove it from most of my sites, especially when using image replacement techniques which makes the dots end up going right across my screen!!

But…

If you care about usability you may want to think about keeping the borders as it’s intended for users to see where they are when tabbing through links, etc.

Useful Link

151 posts
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Microlancer Beta Tester
  • Sold between 100 and 1 000 dollars
  • United States
Keenpixel says

Although it might like more aesthetically pleasing to remove the default dotted border, it does pose some accessibility issues. For instance, someone who was using the tab button to navigate instead of the mouse would not be able to find your links!

Just another side of things to keep in mind.

80 posts
  • Bought between 10 and 49 items
  • Denmark
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 100 and 1 000 dollars
mads says
Although it might like more aesthetically pleasing to remove the default dotted border, it does pose some accessibility issues. For instance, someone who was using the tab button to navigate instead of the mouse would not be able to find your links! Just another side of things to keep in mind.

This is the reason why I only apply the style to the borders that are really annoying, and don’t really matter that much to accessibility – mainly the links on my logos when I use a specific technique to replace text with the logo.

352 posts
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
+1 more
danharper says

I do the same as Mads. I’ll only remove outline on header logos and on links where there’s an obvious colour change on focus.

2529 posts
  • Attended a Community Meetup
  • Author had a Free File of the Month
  • Blog Editor
  • Bought between 50 and 99 items
  • Contributed a Tutorial to a Tuts+ Site
  • Envato Staff
  • Exclusive Author
+8 more
JeffreyWay Moderator says

I think that the only time it would make sense to remove the outline is when you’re using image replacement. It’s never fun to see that huge dotted line extending to the edge of your monitor. Other than that, it’s best to leave it in.

30 posts
  • Australia
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 100 and 1 000 dollars
jordanpayne says

I agree with what most of you are saying, it shouldn’t be removed unless it subtracts from a designs visual appeal which is usually never. I only ever remove it from the header image on every site i design.

It’s a good tip to know though

by
by
by
by
by
by