{"id":346652,"date":"2021-08-16T06:55:00","date_gmt":"2021-08-16T13:55:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=346652"},"modified":"2021-08-16T07:54:40","modified_gmt":"2021-08-16T14:54:40","slug":"outline-style","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-style\/","title":{"rendered":"outline-style"},"content":{"rendered":"\n<p>The <code>outline-style<\/code> CSS property specifies the style of an element&#8217;s outline. What\u2019s an outline? An <dfn>outline<\/dfn> 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.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">button {\n  outline-style: dashed;\n}<\/code><\/pre>\n\n\n\n<p><code>outline-style<\/code> is a constituent property in the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline\/\"><code>outline<\/code><\/a> shorthand and is defined in the <a href=\"https:\/\/drafts.csswg.org\/css-ui\/#outline-style\" rel=\"noopener\">CSS Basic User Interface Module Level 4<\/a> specification which is currently in Editor\u2019s Draft status.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"h-usage\">Usage<\/h3>\n\n\n<p>We usually set the outline of an element using the shorthand property:<\/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: 5px dashed black;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessibility\">Accessibility<\/h3>\n\n\n<p>By default, different user agents provide different outline styling on focused elements to help indicate non-mouse interactions for accessibility reasons, but that visual is generally beneficial to everyone.&nbsp;This styling is typically an outline around the element.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1754\" height=\"559\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/B5mGuSWI.png?resize=1754%2C559&#038;ssl=1\" alt=\"\" class=\"wp-image-346683\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/B5mGuSWI.png?w=1754&amp;ssl=1 1754w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/B5mGuSWI.png?resize=300%2C96&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/B5mGuSWI.png?resize=1024%2C326&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/B5mGuSWI.png?resize=768%2C245&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/B5mGuSWI.png?resize=1536%2C490&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/B5mGuSWI.png?resize=1000%2C319&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>In Chrome, the outline style is a solid; in Firefox it is a lighter, partially dotted one.<\/figcaption><\/figure>\n\n\n\n<p>There are some reasons why you would want to change the default outline style:<\/p>\n\n\n\n<ul><li>You can set that style to match your brand.<\/li><li>You can make the outline more noticeable.<\/li><li>You can bring more attention to the user by changing the outline style on the element\u2019s focus.<\/li><\/ul>\n\n\n\n<p>And this is when&nbsp;<code>outline-styl<\/code>e&nbsp;comes in handy. <strong>But make sure your custom style is, at the very least, as accessible as the default style.<\/strong> That means making it clear and noticeable, while not trying to steer too far that it no longer resembles a focus state. Eric Bailey has a lot of great advice on this in his <a href=\"https:\/\/css-tricks.com\/focusing-on-focus-styles\/\">&#8220;Focusing on Focus Styles&#8221;<\/a> article.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">outline-style: auto | &lt;outline-line-style>\n\n\/* where *\/\n&lt;outline-line-style> = none | dotted | dashed | solid | double | groove | ridge | inset | outset<\/code><\/pre>\n\n\n\n<ul class=\"ticss-a4e06c82\"><li><strong>Initial value:<\/strong> <code>none<\/code><\/li><li><strong>Applies to:<\/strong> all elements<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Computed value<\/strong>: as specified<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\noutline-style: auto;\noutline-style: none;\noutline-style: dotted;\noutline-style: dashed;\noutline-style: solid;\noutline-style: double;\noutline-style: groove;\noutline-style: ridge;\noutline-style: inset;\noutline-style: outset;\n\n\/* Global values *\/\noutline-width: initial;\noutline-width: inherit;\noutline-width: unset;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1512\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_EB945E9E43D811133C2C1E0D8EC6F14605563B10EE7014B54B1BC2123F5568E7_1628618960033_outline-style.png?resize=1920%2C1512&#038;ssl=1\" alt=\"A three-by-three grid of boxes that are evenly spaced in white against a gradient that goes from bright orange to dark orange. Each box demonstrates an outline-style property value.\" class=\"wp-image-346654\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_EB945E9E43D811133C2C1E0D8EC6F14605563B10EE7014B54B1BC2123F5568E7_1628618960033_outline-style.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_EB945E9E43D811133C2C1E0D8EC6F14605563B10EE7014B54B1BC2123F5568E7_1628618960033_outline-style.png?resize=300%2C236&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_EB945E9E43D811133C2C1E0D8EC6F14605563B10EE7014B54B1BC2123F5568E7_1628618960033_outline-style.png?resize=1024%2C806&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_EB945E9E43D811133C2C1E0D8EC6F14605563B10EE7014B54B1BC2123F5568E7_1628618960033_outline-style.png?resize=768%2C605&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_EB945E9E43D811133C2C1E0D8EC6F14605563B10EE7014B54B1BC2123F5568E7_1628618960033_outline-style.png?resize=1536%2C1210&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_EB945E9E43D811133C2C1E0D8EC6F14605563B10EE7014B54B1BC2123F5568E7_1628618960033_outline-style.png?resize=1000%2C788&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<ul><li><strong><code>auto<\/code>:<\/strong> Allows user agents to draw a custom outline style on elements.<\/li><li><strong><code>none<\/code>:<\/strong> The <strong>default<\/strong> value. Outline is not drawn. The computed value of <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-width\/\"><code>outline-width<\/code><\/a> is <code>0<\/code>.<\/li><li><strong><code>dotted<\/code>:<\/strong> Draws a bunch of round dots around the element.<\/li><li><strong><code>dashed<\/code>:<\/strong> Draws square-ended dashes around the element.<\/li><li><strong><code>solid<\/code>:<\/strong> A single line wraps around the element.<\/li><li><strong><code>double<\/code>:<\/strong> Draws two parallel solid lines along the element\u2019s edge, with space between them. The thickness of the two lines and the gap between them is equal to the <code>outline-width<\/code> value. The <code>outline-width<\/code> must be at least 3px wide for the double outline to be visible.<\/li><li><strong><code>groove<\/code>:<\/strong> The outline looks like it\u2019s carved in the page. This carved effect usually comes from the color specified using the <code>outline-color<\/code> property, plus a slightly darker version of it that the browser figures out on its own.<\/li><li><strong><code>ridge<\/code>:<\/strong> The opposite of <code>groove<\/code>, where the outline looks as if it\u2019s coming off of the page.<\/li><li><strong><code>inset<\/code>:<\/strong> Gives the element\u2019s box an embedded appearance, as if the content inside of the outline is sinking into the page.<\/li><li><strong><code>outset<\/code>:<\/strong> The opposite of <code>inset<\/code>, giving the element\u2019s box an embossed appearance, as if the content inside of the outline is coming out of the page.<\/li><li><strong><code>initial<\/code>:<\/strong> Applies the property\u2019s default setting, which is <code>none<\/code>.<\/li><li><strong><code>inherit<\/code>:<\/strong> Adopts the <code>outline-style<\/code> value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong> Removes the current <code>outline-style<\/code> from the element.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example\">Example<\/h3>\n\n\n<p>The following example makes the outline of the button double once it\u2019s focused:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">button {\n  outline-width: 1px;\n  outline-style: solid;\n  outline-color: lightblue;\n}\n\nbutton:focus {\n  outline-style: double;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p>You can play around this property in the following demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJmqVxm\" src=\"\/\/codepen.io\/anon\/embed\/OJmqVxm?height=800&amp;theme-id=1&amp;slug-hash=OJmqVxm&amp;default-tab=result\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJmqVxm\" title=\"CodePen Embed OJmqVxm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">8+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_outline-width\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-documentation\">More documentation<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-ui\/#outline-style\" rel=\"noopener\">CSS Basic User Interface Module Level 4<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/outline-style\" rel=\"noopener\">MDN documentation<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"css-tricks\">CSS tricks!<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-346652\">\n\n  <time datetime=\"2018-03-29\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 29, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/focusing-on-focus-styles\/\">\n      Focusing on Focus Styles    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/ericwbailey\/\" aria-label=\"Author page of Eric Bailey\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/188a9d4deb76ac6e69c7f65358897476?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/188a9d4deb76ac6e69c7f65358897476?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/ericwbailey\/\">\n      Eric Bailey    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-346652\">\n\n  <time datetime=\"2019-12-02\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 2, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/having-a-little-fun-with-custom-focus-styles\/\">\n      Having a Little Fun With Custom Focus Styles    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/larissamaza\/\" aria-label=\"Author page of Lari Maza\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/Ln0rd2NX_400x400.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/larissamaza\/\">\n      Lari Maza    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-346652\">\n\n  <time datetime=\"2021-02-15\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/beautiful-accessibility-with-floating-focus\/\">\n      Beautiful accessibility with Floating Focus    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-346652\">\n\n  <time datetime=\"2020-08-28\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 28, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/copy-the-browsers-native-focus-styles\/\">\n      Copy the Browser&#8217;s Native Focus Styles    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-346652\">\n\n  <time datetime=\"2018-11-14\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 29, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/keyboard-only-focus-styles\/\">\n      Keyboard-Only Focus Styles    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-346652\">\n\n  <time datetime=\"2008-07-28\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 8, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/removing-the-dotted-outline\/\">\n      Removing The Dotted Outline    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-346652\">\n\n  <time datetime=\"2018-05-09\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 9, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/overriding-default-button-styles\/\">\n      Overriding Default Button Styles    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-346652\">\n\n  <time datetime=\"2021-06-18\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 18, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/using-the-outline-property-as-a-collapsable-border\/\">\n      Using the `outline` Property as a Collapsable Border    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/carterli\/\" aria-label=\"Author page of Carter Li\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/\u5fae\u4fe1\u56fe\u7247_202010010819581.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/carterli\/\">\n      Carter Li    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-346652\">\n\n  <time datetime=\"2017-11-08\" title=\"Originally published Aug 16, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 8, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/visually-pleasing-focus\/\">\n      &#8220;a more visually-pleasing focus&#8221;    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/outline\/\" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The outline-style CSS property specifies the style of an element&#8217;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. outline-style is a constituent property in the outline shorthand and is [&hellip;]<\/p>\n","protected":false},"author":4997,"featured_media":300990,"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],"acf":[],"jetpack-related-posts":[{"id":14079,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline\/","url_meta":{"origin":346652,"position":0},"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":346652,"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":3761,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-diagnostics\/","url_meta":{"origin":346652,"position":2},"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":346470,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-width\/","url_meta":{"origin":346652,"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":3344,"url":"https:\/\/css-tricks.com\/snippets\/css\/removing-dotted-outline\/","url_meta":{"origin":346652,"position":4},"title":"Removing Dotted Outline","date":"August 10, 2009","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350656,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-color\/","url_meta":{"origin":346652,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/346652"}],"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\/4997"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=346652"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/346652\/revisions"}],"predecessor-version":[{"id":348277,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/346652\/revisions\/348277"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=346652"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=346652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}