{"id":350656,"date":"2021-09-01T10:54:41","date_gmt":"2021-09-01T17:54:41","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=350656"},"modified":"2022-07-11T09:29:27","modified_gmt":"2022-07-11T16:29:27","slug":"outline-color","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-color\/","title":{"rendered":"outline-color"},"content":{"rendered":"\n<p>The <code>outline-color<\/code> CSS property specifies the color 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-color: #e435;\n}<\/code><\/pre>\n\n\n\n<p><code>outline-color<\/code> is a constituent property in the <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//o//outline///"><code>outline<\/code><\/a> shorthand and is defined in the <a href=https://css-tricks.com/"https:////drafts.csswg.org//css-ui//#outline-color\" 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: 0.1em solid darkgray;\n}<\/code><\/pre>\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-color: &lt;color>| invert<\/code><\/pre>\n\n\n\n<ul class=\"ticss-f33ad05a\"><li><strong><strong>Initial value:<\/strong><\/strong> <code>invert<\/code> (<code>currentColor<\/code>, in case <code>invert<\/code> is not supported)<\/li><li><strong>Applies to:<\/strong> all elements<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Computed value:<\/strong> For the keyword <code>invert<\/code>, the computed value is <code>invert<\/code>. For the color value, if the value is translucent, the computed value will be the <code>rgba()<\/code> corresponding one. If it isn&#8217;t, it will be the <code>rgb()<\/code> corresponding one. The transparent keyword maps to <code>rgba(0,0,0,0)<\/code>.<\/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 value *\/\noutline-color: invert;\n\n\/* &lt;color> values *\/\noutline-color: #333;\noutline-color: darkorange;\noutline-color: hsl(210,100%,44%);\n\n\/* Global values *\/\noutline-width: initial;\noutline-width: inherit;\noutline-width: unset;<\/code><\/pre>\n\n\n\n<ul><li><strong><code>&lt;color&gt;<\/code>:<\/strong> Defines the color of the outline and accepts <code>&lt;rgb()&gt;<\/code>, <code>&lt;rgba()&gt;<\/code>, <code>&lt;hsl()&gt;<\/code>, <code>&lt;hsla()&gt;<\/code>, <code>&lt;hex-color&gt;<\/code>, <code>&lt;named-color&gt;<\/code>, <code>currentcolor<\/code> and <code>&lt;deprecated-system-color&gt;<\/code><\/li><li><strong><code>invert<\/code>:<\/strong> The default value. Specifies an inverted value of the background color of where the outline is rendered, therefore it ensures that the outline is visible.<\/li><li><strong><code>initial<\/code>:<\/strong> Applies the property\u2019s default setting, which is <code>invert<\/code>.<\/li><li><strong><code>inherit<\/code>:<\/strong> Adopts the <code>outline-color<\/code> value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong> Removes the current <code>outline-color<\/code> from the element.<\/li><\/ul>\n\n\n\n<p class=\"is-style-explanation\">According to specs, If the browser doesn\u2019t support the <code>invert<\/code> value, then the initial value of the <code>outline-color<\/code> property is the <strong>currentColor<\/strong> keyword, but at the time of writing, <code>invert<\/code> is considered invalid in all modern browsers. You can check the browser support at <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_outline-color_invert/" rel=\"noopener\">caniuse<\/a>.<\/p>\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 red 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: gray;\n}\n\nbutton:focus {\n  outline-color: red;\n}    <\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessibility\">Accessibility<\/h3>\n\n\n<p>An outline is typically used to indicate focus on elements, which can be useful for non-mouse interactions for accessibility reasons and it can generally benefit all users.<\/p>\n\n\n\n<p>It\u2019s very likely that you would want to change the outline color to match your brand or to make it more noticeable. And this is when <code>outline-color<\/code> comes in handy. <strong>But make sure your custom color meet WCAG\u2019s requirements<\/strong>, particularly <a href=https://css-tricks.com/"https:////www.w3.org//WAI//WCAG21//Understanding//focus-visible.html/" rel=\"noopener\">Success Criterion 2.4.7<\/a> which details a visible focus state.<\/p>\n\n\n\n<p>Not only we need to ensure that the contrast ratio between the outline color and the background it\u2019s on is high enough to ensure clear visibility, but also in cases where there is no space between the outline and the element \u2014 then we need to check the contrast ratio between the outline color and the background of the element itself.<\/p>\n\n\n\n<p>Non-text UI controls, like buttons, <strong>must have a color contrast ratio of at least 3:1 against adjacent colors<\/strong>, according to <a href=https://css-tricks.com/"https:////www.w3.org//TR//WCAG21//#contrast-minimum\" rel=\"noopener\">WCAG Success Criterion 1.4.3<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"374\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//08//s_218F2768FC55F0DADCAE12EDC470FDEE41900467B6B4CB6F915539ED9BA7DB93_1629048878038_contrast-ratio-outline.png?resize=1022%2C374&amp;ssl=1\%22 alt=\"Two blue buttons with white labels that say button. The button on the left has a dark blue outline while the button on the right has a black outline. The button on the left fails the 3.1 contrast ratio requirement with a 1.89.1 ration, while the right button passes with a 3.6.1 ratio.\" class=\"wp-image-350657\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_218F2768FC55F0DADCAE12EDC470FDEE41900467B6B4CB6F915539ED9BA7DB93_1629048878038_contrast-ratio-outline.png?w=1022&amp;ssl=1 1022w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_218F2768FC55F0DADCAE12EDC470FDEE41900467B6B4CB6F915539ED9BA7DB93_1629048878038_contrast-ratio-outline.png?resize=300%2C110&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_218F2768FC55F0DADCAE12EDC470FDEE41900467B6B4CB6F915539ED9BA7DB93_1629048878038_contrast-ratio-outline.png?resize=768%2C281&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_218F2768FC55F0DADCAE12EDC470FDEE41900467B6B4CB6F915539ED9BA7DB93_1629048878038_contrast-ratio-outline.png?resize=1000%2C366&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>A dark blue outline color, left, provides insufficient contrast compared to a black outline.<\/figcaption><\/figure>\n\n\n\n<p>Sara Soueidan explains this very well in her <a href=https://css-tricks.com/"https:////www.sarasoueidan.com//blog//focus-indicators///" rel=\"noopener\">\u201cA guide to designing accessible, WCAG-compliant focus indicators\u201d<\/a> article. You can learn a lot more about WCAG\u2019s contrast ratios and how they\u2019re determined in <a href=https://css-tricks.com/"https:////css-tricks.com//understanding-web-accessibility-color-contrast-guidelines-and-ratios///">Stacy Arellano\u2019s deep dive article<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p>Play with outline properties 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_VwbNeoR\" src=https://css-tricks.com/"////codepen.io//anon//embed//VwbNeoR?height=850&amp;theme-id=1&amp;slug-hash=VwbNeoR&amp;default-tab=result\%22 height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwbNeoR\" title=\"CodePen Embed VwbNeoR\" 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\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/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\"><abbr title=\"Technology Preview\">All<\/abbr><\/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\">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\">iOS Safari<\/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\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">64+<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_outline-color/" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////drafts.csswg.org//css-ui//#outline-color\" rel=\"noopener\">CSS Basic User Interface Module Level 4<\/a><\/li><li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//outline-color/" rel=\"noopener\">MDN documentation<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tips-and-tricks\">Tips and tricks<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-350656\">\n\n  <time datetime=\"2019-12-02\" title=\"Originally published Sep 1, 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/"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/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//06//Ln0rd2NX_400x400.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//larissamaza///">\n      Lari Maza    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-350656\">\n\n  <time datetime=\"2020-08-28\" title=\"Originally published Sep 1, 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/"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/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-350656\">\n\n  <time datetime=\"2017-05-02\" title=\"Originally published Sep 1, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 2, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//focus-styles-non-interactive-elements///">\n      Focus Styles on Non-Interactive Elements?    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-350656\">\n\n  <time datetime=\"2018-03-29\" title=\"Originally published Sep 1, 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/"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/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//ericwbailey///">\n      Eric Bailey    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-350656\">\n\n  <time datetime=\"2018-11-14\" title=\"Originally published Sep 1, 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/"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/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-350656\">\n\n  <time datetime=\"2008-07-28\" title=\"Originally published Sep 1, 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/"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/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-350656\">\n\n  <time datetime=\"2021-06-18\" title=\"Originally published Sep 1, 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/"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/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2020//09///u5fae/u4fe1/u56fe/u7247_202010010819581.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//carterli///">\n      Carter Li    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-good-resources\">Good resources<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card notes\" id=\"mini-post-350656\">\n\n  <time datetime=\"2017-11-08\" title=\"Originally published Sep 1, 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/"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/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-350656\">\n\n  <time datetime=\"2020-06-26\" title=\"Originally published Sep 1, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 26, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//quick-tips-for-high-contrast-mode///">\n      Quick Tips for High Contrast Mode    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-350656\">\n\n  <time datetime=\"2017-08-09\" title=\"Originally published Sep 1, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 16, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//removing-ugly-focus-ring-keeping///">\n      Removing that ugly :focus ring (and keeping it too)    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//outline///" rel=\"tag\">outline<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"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&amp;d=retro&amp;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/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The outline-color CSS property specifies the color of an element&#8217;s outline. What\u2019s an outline? An outline is a line that [&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":{"_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\/350656"}],"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=350656"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350656\/revisions"}],"predecessor-version":[{"id":366803,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350656\/revisions\/366803"}],"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=350656"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}