{"id":14079,"date":"2011-09-05T20:53:01","date_gmt":"2011-09-06T03:53:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14079"},"modified":"2021-08-09T12:04:40","modified_gmt":"2021-08-09T19:04:40","slug":"outline","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline\/","title":{"rendered":"outline"},"content":{"rendered":"\n<p>The <code>outline<\/code> property in CSS draws a line around the outside of an element. It&#8217;s similar to <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border\/\">border<\/a> except that:<\/p>\n\n\n\n<ol><li>It always goes around all the sides, you can&#8217;t specify particular sides<\/li><li>It&#8217;s not a part of the <a href=\"https:\/\/css-tricks.com\/the-css-box-model\/\">box model<\/a>, so it won&#8217;t affect the position of the element or adjacent elements (nice for debugging!)<\/li><\/ol>\n\n\n\n<p>Other minor facts include that it doesn&#8217;t respect <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-radius\/\">border-radius<\/a> (makes sense I suppose as it&#8217;s not a border) and that it isn&#8217;t always rectangular. If the outline goes around an inline element with different font-sizes, for instance, Opera will draw a staggered box around it all.<\/p>\n\n\n\n<p>It is often used for accessibility reasons, to emphasize a link when tabbed to without affecting positioning and in a different way than hover.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a:focus {\n  outline: 1px dashed red;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"shorthand\">Shorthand<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">outline: [ &lt;outline-width> || &lt;outline-style> || &lt;outline-color> ] | inherit<\/code><\/pre>\n\n\n\n<p>It takes the same properties as border, but with &#8220;outline-&#8221; instead.<\/p>\n\n\n\n<p>The above shorthand could have been written:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">a:focus {\n  outline-width: 1px;\n  outline-style: dashed;\n  outline-color: red;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"notes\">Notes<\/h3>\n\n\n<ul><li>You can&#8217;t set an outline on just one (or two, or three) sides of an elements. All sides only. There is no such thing as <code>outline-top<\/code>, <code>outline-right<\/code>, <code>outline-bottom<\/code>, or <code>outline-left<\/code> like there is with <code>border<\/code>. <\/li><li>Try opening up the console on any website and running <code>document.head.insertAdjacentHTML(\"beforeend\", \"&lt;style&gt;* { outline: 1px solid red; }&lt;\/style&gt;\");<\/code> &#8211; you&#8217;ll see a lot of the sites structure that way.<\/li><li><code>outline<\/code> is used for <code>:focus<\/code> styles by default. Remember if you ever remove <code>outline<\/code> styles, like <code>a:focus { outline: 0; }<\/code>, you need to add them back in using some other kind of visually distinct style.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-info\">More Info<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/outline\" rel=\"noopener\">MDN Docs<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<figure class=\"wp-block-table browser-support-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>Any<\/td><td>1.2+<\/td><td>1.5+<\/td><td>7+<\/td><td>8+<\/td><td>Any<\/td><td>3.1+<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The outline property in CSS draws a line around the outside of an element. It&#8217;s similar to border except that: It always goes around all the sides, you can&#8217;t specify particular sides It&#8217;s not a part of the box model, so it won&#8217;t affect the position of the element or adjacent elements (nice for debugging!) [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.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":[1270],"acf":[],"jetpack-related-posts":[{"id":7081,"url":"https:\/\/css-tricks.com\/snippets\/css\/multiple-borders\/","url_meta":{"origin":14079,"position":0},"title":"Multiple Borders","date":"August 12, 2010","format":false,"excerpt":"Using pseudo element(s) You can position a pseudo element such that it's either behind the element, and larger, making a border effect with it's own background, or smaller and inside (but make sure the content gets positioned on top). The element needing multiple borders should have its own border and\u2026","rel":"","context":"With 31 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254226,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-offset\/","url_meta":{"origin":14079,"position":1},"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":[]},{"id":346652,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-style\/","url_meta":{"origin":14079,"position":2},"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":346470,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-width\/","url_meta":{"origin":14079,"position":3},"title":"outline-width","date":"August 10, 2021","format":false,"excerpt":"The outline-width CSS property specifies the thickness 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:focus { outline-width: 5px; } We\u2026","rel":"","context":"Similar post","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":350656,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-color\/","url_meta":{"origin":14079,"position":4},"title":"outline-color","date":"September 1, 2021","format":false,"excerpt":"The outline-color CSS property specifies the color 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-color: #e435; } outline-color\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":14079,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14079"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14079"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14079\/revisions"}],"predecessor-version":[{"id":346479,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14079\/revisions\/346479"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14079"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}