403 posts I <3 WordPress
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in United States
  • Has sold $250,000+ on Envato Market
  • Won a competition
+9 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
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+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
  • Has been part of the Envato Community for over 7 years
  • Has referred 200+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
+3 more
rblalock says

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

403 posts I <3 WordPress
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in United States
  • Has sold $250,000+ on Envato Market
  • Won a competition
+9 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+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
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+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
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+6 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Interviewed on an Envato blog
+11 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
  • Has been part of the Envato Community for over 6 years
  • Located in Australia
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+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