{"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=https://css-tricks.com/"////codepen.io//anon//embed//Lyzyoy?height=450&amp;theme-id=1&amp;slug-hash=Lyzyoy&amp;default-tab=result\%22 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=https://css-tricks.com/"////codepen.io//anon//embed//PmJmrd?height=450&amp;theme-id=1&amp;slug-hash=PmJmrd&amp;default-tab=result\%22 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=https://css-tricks.com/"////codepen.io//anon//embed//eWGRpZ?height=450&amp;theme-id=1&amp;slug-hash=eWGRpZ&amp;default-tab=result\%22 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://css-tricks.com/"https:////twitter.com//hashtag//CSS?src=hash&amp;ref_src=twsrc%5Etfw\%22 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://css-tricks.com/"https:////t.co//hszofia2Dy/">pic.twitter.com\/hszofia2Dy<\/a><\/p>&mdash; Sara Soueidan (@SaraSoueidan) <a href=https://css-tricks.com/"https:////twitter.com//SaraSoueidan//status//1335270452235792387?ref_src=twsrc%5Etfw\%22 rel=\"noopener\">December 5, 2020<\/a><\/blockquote><script async src=https://css-tricks.com/"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\">126<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127<\/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, [&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":{"_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,1271],"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\/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}]}}