{"id":254226,"date":"2017-05-06T05:33:13","date_gmt":"2017-05-06T12:33:13","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=254226"},"modified":"2021-08-09T12:05:20","modified_gmt":"2021-08-09T19:05:20","slug":"outline-offset","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-offset\/","title":{"rendered":"outline-offset"},"content":{"rendered":"\n<p>The <code>outline-offset<\/code> property in CSS offsets a defined outline from an element&#8217;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 it will not affect the position or layout of surrounding elements.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.example {\n  outline: solid 2px blue;\n  outline-offset: 10px;\n}<\/code><\/pre>\n\n\n\n<p>Outlines defined using the <code>outline<\/code> property are often used as focus rings, for accessibility. Thus, the <code>outline-offset<\/code> property allows you to change the position of the focus ring.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p><code>outline-offset<\/code> accepts one kind of value, a length, which can be:<\/p>\n\n\n\n<ul><li><code>0<\/code> (the default)<\/li><li>Any other valid length with a specified unit (including negative values)<\/li><\/ul>\n\n\n\n<p>Note that <code>outline-offset<\/code>, like <code>outline-width<\/code>, does not accept percentage values.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"positioning-of-the-outline\">Positioning of the Outline<\/h3>\n\n\n<p>By default an element\u2019s outline is drawn immediately outside the border (or immediately outside where the border would be drawn if a border was defined). Therefore, it\u2019s technically possible to combine outline and border for a two-border effect:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Lyzyoy\" src=\"\/\/codepen.io\/anon\/embed\/Lyzyoy?height=450&amp;theme-id=1&amp;slug-hash=Lyzyoy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Lyzyoy\" title=\"CodePen Embed Lyzyoy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>From there, <code>outline-offset<\/code> can be used to change the position of the outline relative to the border edge. Try the demo below which allows you to interactively change the outline\u2019s offset value using the slider. The value of the offset is displayed on the page as you move the slider:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PmJmrd\" src=\"\/\/codepen.io\/anon\/embed\/PmJmrd?height=450&amp;theme-id=1&amp;slug-hash=PmJmrd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PmJmrd\" title=\"CodePen Embed PmJmrd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>As mentioned above, <code>outline-offset<\/code> accepts negative values, which will offset the outline in the opposite direction (towards the center of the element), as shown in the next interactive demo. Notice the outline starts at -40px:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eWGRpZ\" src=\"\/\/codepen.io\/anon\/embed\/eWGRpZ?height=450&amp;theme-id=1&amp;slug-hash=eWGRpZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eWGRpZ\" title=\"CodePen Embed eWGRpZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\"><i>If you view the above demo in Firefox, you&#8217;ll notice the outline appears correct at first but when the slider is adjusted the outline doesn&#8217;t render smoothly and ends up in the wrong position. Scrolling the element out of view, then back into view, forces the browser to repaint the outline in the correct position. This seems to be a Firefox-only bug.<\/i><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">\ud83d\udc81\u200d\u2640\ufe0f Quick <a href=\"https:\/\/twitter.com\/hashtag\/CSS?src=hash&amp;ref_src=twsrc%5Etfw\" rel=\"noopener\">#CSS<\/a> tip: <br><br>The `outline-offset` property accepts negative values, which can be useful for when you want to show an outline &amp; avoid it cutting off or overlapping adjacent elements, such as focusable table (or grid) cells and rows. <a href=\"https:\/\/t.co\/hszofia2Dy\">pic.twitter.com\/hszofia2Dy<\/a><\/p>&mdash; Sara Soueidan (@SaraSoueidan) <a href=\"https:\/\/twitter.com\/SaraSoueidan\/status\/1335270452235792387?ref_src=twsrc%5Etfw\" rel=\"noopener\">December 5, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"not-part-of-outline-shorthand\">Not Part of <code>outline<\/code> Shorthand<\/h3>\n\n\n<p>Similar to the <code>border<\/code> property, the <code>outline<\/code> property is a shorthand that represents three properties: <code>outline-color<\/code>, <code>outline-style<\/code>, and <code>outline-width<\/code>.<\/p>\n\n\n\n<p>The <code>outline-offset<\/code> property, therefore, is not represented in this or any other shorthand property, so it needs to be declared separately from the defined outline itself.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"related\">Related<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline\/\">outline<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border\/\">border<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More Information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-ui-3\/#outline-offset\" rel=\"noopener\">outline-offset on W3C<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=outline\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">2<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">15<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">3.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.1<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">3.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>The &#8220;partial&#8221; indicator for IE means IE does not support <code>outline-offset<\/code>, but does support <code>outline<\/code> shorthand and the three properties it represents.<\/p>\n\n\n\n<p>In addition to the bug mentioned above in the &#8220;Positioning of the Outline&#8221; section, there is a bug in Firefox where the outline is drawn incorrectly if the element has a child element that overflows the parent boundary (e.g. using negative margins or absolute positioning). Therefore, the <code>outline-offset<\/code> value will be relative to the extended boundary created by the overflowing child, rather than the original parent element boundaries. To understand this better, <a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/ybKrQY\" rel=\"noopener\">see this CodePen<\/a>, <a href=\"http:\/\/stackoverflow.com\/questions\/10662902\/css-outline-different-behavior-behavior-on-webkit-gecko\" rel=\"noopener\">this Stack Overflow thread<\/a>, and <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=687311\" rel=\"noopener\">this bug report<\/a> (credit to reader Matt Vanes for sending in this bug).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The outline-offset property in CSS offsets a defined outline from an element&#8217;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 it will not affect the [&hellip;]<\/p>\n","protected":false},"author":7178,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"closed","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,1271],"acf":[],"jetpack-related-posts":[{"id":346470,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-width\/","url_meta":{"origin":254226,"position":0},"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":346652,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-style\/","url_meta":{"origin":254226,"position":1},"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":14079,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline\/","url_meta":{"origin":254226,"position":2},"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":350656,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-color\/","url_meta":{"origin":254226,"position":3},"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":7081,"url":"https:\/\/css-tricks.com\/snippets\/css\/multiple-borders\/","url_meta":{"origin":254226,"position":4},"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":3761,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-diagnostics\/","url_meta":{"origin":254226,"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\/254226"}],"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\/7178"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=254226"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/254226\/revisions"}],"predecessor-version":[{"id":346480,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/254226\/revisions\/346480"}],"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=254226"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=254226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}