diff --git a/packages/vapor/scss/controls/numeric-input.scss b/packages/vapor/scss/controls/numeric-input.scss
index 9be3e5643f..34a74840ae 100644
--- a/packages/vapor/scss/controls/numeric-input.scss
+++ b/packages/vapor/scss/controls/numeric-input.scss
@@ -19,6 +19,10 @@ $numeric-input-buttons-border-radius: 4px;
         border: $default-border;
         border-radius: $border-radius;
         box-shadow: inset 0 0 3px 0 rgba(var(--black-rgb), $transparency-5);
+
+        &:focus {
+            @include focus-border(0);
+        }
     }
 
     button {
@@ -41,7 +45,17 @@ $numeric-input-buttons-border-radius: 4px;
         }
 
         &:focus {
-            @include focus-border(2px);
+            @include focus-border(0);
+        }
+    }
+}
+// override the style of the focus for numeric inputs in Firefox
+@supports (-moz-appearance: none) {
+    .numeric-input {
+        input:focus,
+        button:focus {
+            outline-style: solid;
+            outline-offset: -2px;
         }
     }
 }
diff --git a/packages/vapor/scss/elements/btn.scss b/packages/vapor/scss/elements/btn.scss
index ede2034c7f..a0f476fc09 100644
--- a/packages/vapor/scss/elements/btn.scss
+++ b/packages/vapor/scss/elements/btn.scss
@@ -44,7 +44,6 @@
         color: var(--navy-blue-80);
         text-decoration: none;
         background-color: var(--white);
-        outline-color: var(--bright-turquoise-40);
     }
 
     &:hover {
@@ -285,3 +284,11 @@ button {
         color: var(--rain-forest-green-30);
     }
 }
+
+// override the style of the focus for buttons in Firefox
+@supports (-moz-appearance: none) {
+    .btn:focus {
+        outline-style: solid;
+        outline-offset: -2px;
+    }
+}
diff --git a/packages/vapor/scss/elements/links.scss b/packages/vapor/scss/elements/links.scss
index 2ed9fae7c1..d01f731116 100644
--- a/packages/vapor/scss/elements/links.scss
+++ b/packages/vapor/scss/elements/links.scss
@@ -55,3 +55,10 @@ a {
         text-decoration: underline;
     }
 }
+
+// override the style of the focus for links in Firefox
+@supports (-moz-appearance: none) {
+    .link:focus {
+        outline-style: solid;
+    }
+}
diff --git a/packages/vapor/scss/helpers.scss b/packages/vapor/scss/helpers.scss
index 710b346936..2581ea043d 100644
--- a/packages/vapor/scss/helpers.scss
+++ b/packages/vapor/scss/helpers.scss
@@ -17,6 +17,8 @@ $browser-context: 13; // Default
 }
 
 @mixin focus-border($offset) {
-    outline: 2px auto var(--digital-blue-20);
+    outline-width: 2px;
+    outline-style: auto;
+    outline-color: var(--bright-turquoise-40);
     outline-offset: $offset;
 }