{"id":3344,"date":"2009-08-10T19:24:19","date_gmt":"2009-08-11T02:24:19","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=3344"},"modified":"2009-08-10T19:24:19","modified_gmt":"2009-08-11T02:24:19","slug":"removing-dotted-outline","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/removing-dotted-outline\/","title":{"rendered":"Removing Dotted Outline"},"content":{"rendered":"<pre><code class=\"css\">a {\r\n   outline: 0;\r\n}<\/code><\/pre>\n<p>Be careful removing outline styles from links, as they are a usability feature. If you do, make sure to define clear focus styles.<\/p>\n<p>If your problem is that the dotted outlines travel all the way to the left or right of the screen because they are floated, try setting the overflow to hidden.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>a { outline: 0; } Be careful removing outline styles from links, as they are a usability feature. If you do, make sure to define clear focus styles. If your problem is that the dotted outlines travel all the way to the left or right of the screen because they are floated, try setting the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":346652,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-style\/","url_meta":{"origin":3344,"position":0},"title":"outline-style","date":"August 16, 2021","format":false,"excerpt":"The outline-style CSS property specifies the style of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button { outline-style: dashed; } outline-style\u2026","rel":"","context":"In \"outline\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3761,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-diagnostics\/","url_meta":{"origin":3344,"position":1},"title":"CSS Diagnostics","date":"September 4, 2009","format":false,"excerpt":"Find mistakes in HTML and highlight the crap out of them. \/* Empty Elements *\/ div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding: 20px; border: 5px dotted yellow !important; } \/* Empty Attributes *\/ *[alt=\"\"], *[title=\"\"], *[class=\"\"], *[id=\"\"], a[href=\"\"], a[href=\"#\"] { border: 5px solid yellow !important; } \/* Deprecated Elements\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14188,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","url_meta":{"origin":3344,"position":2},"title":":focus","date":"September 6, 2011","format":false,"excerpt":"The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } CodePen Embed Fallback Any element (most commonly\u00a0<input>s and\u00a0<textarea>s) are in \"focus\" when they are selected and ready\u2026","rel":"","context":"With 33 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3751,"url":"https:\/\/css-tricks.com\/snippets\/css\/remove-dotted-link-borders\/","url_meta":{"origin":3344,"position":3},"title":"Remove Dotted Link Borders","date":"September 4, 2009","format":false,"excerpt":"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),\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14079,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline\/","url_meta":{"origin":3344,"position":4},"title":"outline","date":"September 5, 2011","format":false,"excerpt":"The outline property in CSS draws a line around the outside of an element. It's similar to border except that: It always goes around all the sides, you can't specify particular sidesIt's not a part of the box model, so it won't affect the position of the element or adjacent\u2026","rel":"","context":"In \"outline\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254226,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-offset\/","url_meta":{"origin":3344,"position":5},"title":"outline-offset","date":"May 6, 2017","format":false,"excerpt":"The outline-offset property in CSS offsets a defined outline from an element's border edge by a specified amount. An outline, which is different from a border, does not take up any space on the page (like an absolutely positioned element) so the outline can be offset in any amount and\u2026","rel":"","context":"In \"outline\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3344"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=3344"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3344\/revisions"}],"predecessor-version":[{"id":3345,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3344\/revisions\/3345"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3344"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}