How to Disable Outlines in CSS
Outlines appear around links and sometimes Flash controls. Not all browsers add them automatically, but some like Firefox 3 do add outlines. Since outlines do not always match your Web designs, you will sometimes want to remove them. Keep in mind that outlines do provide a visual guide to users clicking on links, so you may want to add back a new outline style for usability purposes. You can use Cascading Style Sheet, or CSS, code to remove outlines.
Other People Are Reading
Instructions
-
-
1
Open your external style sheet file -- these files end with the .CSS extension -- and scroll down to the bottom of the code. If your Website does not use an external style sheet, look for <style> tags between your <head> tags and add them if you do not find any.
-
2
Write the following code in your external file or between the <style> tags in your HTML file:
a {outline: 0;}
The above "outline" property controls the outlines browsers display around links. Add "object" and "embed" to your selector to remove outlines from Flash as well:
a, object, embed {outline: 0;}
-
-
3
Create a new style for the hover, active and focus states of links to make them more usable. Replace "outline" with a border, for example.
a:hover, a:active, a:focus {border: 1px solid yellow;}
The above code adds a one-pixel wide, solid yellow border around links whenever a user hovers, clicks or tabs to them. Remove "a:hover" to just add the border when a user clicks or tabs, if you want, to keep the border from appearing on a hovered link.
-
1
Tips & Warnings
Back up your HTML and CSS files before editing them.
References
- Photo Credit Jupiterimages/Photos.com/Getty Images
More Like This
Comments
-
After trying to figure out how to solve this problem for over an hour, this post is the only one that helped! Thank you!
