diff --git a/src/styles/addOutlineWidth/index.js b/src/styles/addOutlineWidth/index.js
index 96868ba9d94..566a1ef34df 100644
--- a/src/styles/addOutlineWidth/index.js
+++ b/src/styles/addOutlineWidth/index.js
@@ -3,6 +3,8 @@
  * can be added to the object
  */
 
+import themeDefault from '../themes/default';
+
 /**
  * Adds the addOutlineWidth property to an object to be used when styling
  *
@@ -14,6 +16,7 @@ function withOutlineWidth(obj, val) {
     return {
         ...obj,
         outlineWidth: val,
+        boxShadow: `0px 0px 0px ${val}px ${themeDefault.borderFocus}`,
     };
 }
 
diff --git a/web/index.html b/web/index.html
index df4c09c7944..a96e576510c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -32,6 +32,14 @@
             -webkit-user-select: none !important;
             -webkit-touch-callout: none !important;
         }
+        :focus-visible {
+            outline: 0;
+            box-shadow: 0px 0px 0px 1px #0185ff;
+        }
+        :focus[data-focusvisible-polyfill] {
+            outline: 0;
+            box-shadow: 0px 0px 0px 1px #0185ff;
+        }
     </style>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
     <link rel="shortcut icon" id="favicon" href="/favicon.png">