Dotted borders around links are an accessibility feature most browsers have by default. It’s for users who must or choose to navigate by keyboard, there is a visual style applied to those links when “tabbed” to. These borders also show up when the link is clicked (in it’s “active” state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:
a:active {
outline: none;
}
NOTE: The advantage here is that the :focus style still will use the outlines, meaning that keyboard navigators will still have the focus styling/visual feedback.
Doesn’t work. Border is still there.
Then UR DOING IT WRONG
works fine!
I too, had to add a:focus to remove the dotted outline.
Just do this..
a{
outline: medium none !important;
}
Try to apply
a:focus {
outline: none;
}
You’re right their code doesn’t work. To make it work I used a:hover,a:active,a:link{outline: 0px none;}
It didn’t work for me on firefox until I added, a:focus then the outline disappeared.
So the final code was:
a:active,a:focus {
outline: none;
}
Thanks, it’s work.
Thanks GS…its work for me thanks a lot!!!
thanks .it works
This did the trick! Thanks!
Graystatic is correct. Needed the a:focus in Firefox to work.
However wouldn’t that negate the keyboard navigators feedback?
Same for me. For Firefox it needs to be
a:active, a:focus { outline: none; }
a:active, a:focus { outline: none; }
this works for me thx
i really liked this way of removing the border.
but at the same time when the user browse the page using TABS, show the a:hover property on each links instead of the dotted border
found out how to do it.
actually i didn’t know that :focus is used for applying styles when it gets keyboard focus.
by applying the required style to :focus , i was able to do this
Works fine, thanks
Yup. if you add a:focus, she works great in Firefox!
Yup works perfect
CSS Reset documents often takes care of this
it helped to remove annoying outline (I was wrongly referring to it as ‘border’ before reading this tutorial) that FireFox was displaying around the html5 video I had on my web site. Thanks.
None of these recommendations worked for tabbing onto my button in Firefox. (I tried button:focus{outline:none;} as well). After much pecking around I found the following recommendation that worked!
button::-moz-focus-inner {
border: 0;
}
As always asked the difference between
, and
. Thank you for the explication, and the tip.
This worked for me:
a:link {
outline: none;
}
Thank You………… this solved a great problem in my project as all images ware outlined on click but now work fine with this property…………….
None of the above worked for me until I did this:
1) make the rule more specific (ie. add style a.toggle), and 2) use :transparent
a.toggle:active,a.toggle:focus {
outline:transparent;
}
It works thanks
It didn’t worked for me but worked with the following:
a:hover,
a:active {
outline: none;
}
This worked for me as well. Thank you!
It worked for me. Thanks much for your help.
a:active,a:focus {
outline: none;
}
Thanks a lot, save a lot of time effort and search !
a:active, a:focus {
outline: none;
}
I just want say tahk you for all css trics!
Its save me so often! thank you very much! really!
simply,
a{
outline: none
}
does the magic.