{"id":829,"date":"2008-07-28T05:45:32","date_gmt":"2008-07-28T12:45:32","guid":{"rendered":"http:\/\/css-tricks.com\/?p=829"},"modified":"2017-02-08T16:09:33","modified_gmt":"2017-02-08T23:09:33","slug":"removing-the-dotted-outline","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/removing-the-dotted-outline\/","title":{"rendered":"Removing The Dotted Outline"},"content":{"rendered":"

Anchor links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they can press enter to navigate to that link).<\/p>\n

<\/p>\n

\"\"<\/figure>\n

You can try it for yourself by clicking on a link and mousing off of that link before letting go. Or, turn on the “Always use the cursor keys to navigate within page” preference, navigate the cursor around, and see the links become outlined.<\/p>\n

\"\"<\/figure>\n
\"\"<\/figure>\n

Usually, this default styling isn’t a big deal. Links are normally active for only a split second before a new page is loaded and the outline is gone. However, there are circumstances where you want to remove this outline.<\/p>\n

Bear in mind that this styling literally uses the “outline” CSS property<\/strong>. Outline<\/a> is very similar to the “border<\/a>“<\/strong> property, with two important differences. One, outline goes around the entire object (much like using just “border”), but you may not be specific about sides. “Outline-left” does not exist. Two, the outline value is not a part of the box model<\/strong>. Border is calculated into the total width of the box, whereas outline is not. This is important so that layouts don’t get bumped around when the outline is applied and removed.<\/p>\n

How to remove it<\/h3>\n

If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset:<\/p>\n

a {\r\n   outline: 0;\r\n}<\/code><\/pre>\n
In general, I recommend just leaving the default outline styling active, but there are a few circumstances where it is quite annoying and should be turned off. For one, if you have a page element that is using large amounts of padding (like for positioning) or is floated<\/em>, these outlines can be very weirdly placed or even stretch the entire width of the screen. Just looks bad. Another scenario is if you steal away the “click” event from an anchor link for another purpose (like, to activate some JavaScript magics). That click will no longer be loading a new page, so the outline will become active and stay that way until you click away somewhere else, much uglier than the just quick and temporary view of it you normally get when clicking a link.<\/p>\n
Make sure to add in new focus styles<\/h3>\n
Because that outline was providing an important accessibility feature, you should really (really) consider adding back in a style for your links focus and active states. Personally, I just like to make them the same as the hover state. It’s about the same thing, as far as actual function.  Whatever your hover state is, even if it’s shifting a background image or changing size or whatever, it can be joined with the active and focus states. Like so:<\/p>\n
a:hover, a:active, a:focus {\r\n  \/* styling for any way a link is about to be used *\/\r\n}<\/code><\/pre>\n
Wow. I really intended this article to be like 3 sentences long and 1 clip of code. Things are never quite as simple as I want them to be!<\/p>\n
Flash<\/h3>\n
If you are having trouble with this dotted out line on a Flash object\/embed, you can:<\/p>\n
object, embed { \r\n  outline: 0;\r\n}<\/code><\/pre>\n
Firefox Inputs<\/h3>\n
Clicking down on an input type=image<\/code> can produce a dotted outline (Does this in Firefox 3.6.8 but not Firefox 4). To remove it: <\/p>\n
input::-moz-focus-inner { \r\n  border: 0; \r\n}<\/code><\/pre>\n
IE 9<\/h3>\n
George Langley wrote in to say that IE 9 apparently doesn’t allow you to remove the dotted outline around links unless you include this meta tag:<\/p>\n
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=9\" \/><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Anchor links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. For […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4,18],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":266368,"url":"https:\/\/css-tricks.com\/css-basics-styling-links-like-boss\/","url_meta":{"origin":829,"position":0},"title":"CSS Basics: Styling Links Like a Boss","date":"February 15, 2018","format":false,"excerpt":"You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/linky-boo.gif?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359880,"url":"https:\/\/css-tricks.com\/should-css-override-default-styles\/","url_meta":{"origin":829,"position":1},"title":"Should CSS Override Default Browser Styles?","date":"January 4, 2022","format":false,"excerpt":"CSS overrides can change the default look of almost anything: You can use CSS to override what a checkbox or radio button looks like, but if you don't, the checkbox will look like a default checkbox on your operating system and some would say that's best for accessibility and usability.You\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-styling.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302330,"url":"https:\/\/css-tricks.com\/custom-styling-form-inputs-with-modern-css-features\/","url_meta":{"origin":829,"position":2},"title":"Custom Styling Form Inputs With Modern CSS Features","date":"February 7, 2020","format":false,"excerpt":"It\u2019s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don\u2019t even need a single line of JavaScript or extra HTML elements! It\u2019s actually gotten easier lately than it has been in the past. Let\u2019s take a look. Here\u2019s where\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/custom-form-inputs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332360,"url":"https:\/\/css-tricks.com\/two-issues-styling-the-details-element-and-how-to-solve-them\/","url_meta":{"origin":829,"position":3},"title":"Two Issues Styling the Details Element and How to Solve Them","date":"January 13, 2021","format":false,"excerpt":"In the not-too-distant past, even basic accordion-like interactions required JavaScript event listeners or some CSS\u2026 trickery. And, depending on the solution used, editing the underlying HTML could get complicated. Now, the 
 and  elements (which combine to form what\u2019s called a \u201cdisclosure widget\u201d) have made creation and maintenance of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/details-summary-issues.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":254403,"url":"https:\/\/css-tricks.com\/focus-styles-non-interactive-elements\/","url_meta":{"origin":829,"position":4},"title":"Focus Styles on Non-Interactive Elements?","date":"May 2, 2017","format":false,"excerpt":"Last month, Heather Migliorisi looked at the accessibility of Smooth Scrolling. In order to do smooth scrolling, you: Check if the clicked link is #jump link Stop the browser default behavior of jumping immediately to that element on the page Animate the scrolling to the element the #jump link pointed\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334360,"url":"https:\/\/css-tricks.com\/weekly-platform-news-webkit-autofill-using-cursor-pointer-delaying-autoplay-videos\/","url_meta":{"origin":829,"position":5},"title":"Weekly Platform News: WebKit autofill, Using Cursor Pointer, Delaying Autoplay Videos","date":"February 12, 2021","format":false,"excerpt":"In this week's roundup, WebKit's prefixed autofill becomes a standard, the pointer cursor is for more than just links, and browsers are jumping on board to delay videos set to autoplay until they're in view... plus more! Let's jump right into it. CSS\u00a0::-webkit-autofill\u00a0has become a standard feature Chrome, Safari, and\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/wpn-20210212.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/829"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=829"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/829\/revisions"}],"predecessor-version":[{"id":251290,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/829\/revisions\/251290"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}