{"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/"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/"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/"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://css-tricks.com/"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: [&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":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[1270],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_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}]}}