479 posts I <3 WordPress
  • Elite Author
  • Exclusive Author
  • Author Level 10
  • Community Superstar
+14 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
  • 6 Years of Membership
  • Author Level 2
  • Collector Level 2
  • Exclusive Author
+1 more
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
  • 8 Years of Membership
  • Affiliate Level 5
  • Author Level 5
  • Collector Level 3
+5 more
rblalock
says

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

479 posts I <3 WordPress
  • Elite Author
  • Exclusive Author
  • Author Level 10
  • Community Superstar
+14 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
  • 7 Years of Membership
  • Affiliate Level 2
  • Author Level 3
  • Collector Level 2
+1 more
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
  • 7 Years of Membership
  • Author Level 2
  • Beta Tester
  • Collector Level 3
+1 more
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
  • 6 Years of Membership
  • Author Level 2
  • Collector Level 2
  • Denmark
+1 more
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
  • 7 Years of Membership
  • Affiliate Level 3
  • Author Level 5
  • Bundle Boss
+8 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
  • 6 Years of Membership
  • Affiliate Level 2
  • Author Level 6
  • Blog Interview
+13 more
JeffreyWay
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
  • 6 Years of Membership
  • Australia
  • Author Level 2
  • Collector Level 1
+1 more
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