diff --git a/packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap
index e47300e178..c25944f0e1 100644
--- a/packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -34,9 +34,6 @@ exports[`Tabs should render correctly 1`] = `
   padding: 0;
   font-size: var(--tonic-fontSizes-sm);
   line-height: var(--tonic-lineHeights-sm);
-  border-color: var(--tonic-colors-transparent);
-  border-style: solid;
-  border-width: var(--tonic-sizes-1h);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -45,40 +42,36 @@ exports[`Tabs should render correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding-left: var(--tonic-space-3x);
-  padding-right: var(--tonic-space-3x);
-  padding-top: var(--tonic-space-2x);
-  padding-bottom: var(--tonic-space-2x);
+  padding-left: var(--tonic-space-4x);
+  padding-right: var(--tonic-space-4x);
+  padding-top: calc(.5rem + .125rem);
+  padding-bottom: calc(.5rem + .125rem);
+}
+
+.emotion-4:focus-visible {
+  outline-color: var(--tonic-colors-red-60);
+  outline-width: var(--tonic-sizes-1h);
+  outline-style: solid;
+  outline-offset: calc(var(--tonic-space-1h) * -1);
+  color: var(--tonic-colors-white-primary);
 }
 
 .emotion-4[aria-selected=true],
 .emotion-4[data-selected] {
-  border: none;
   border-bottom-color: var(--tonic-colors-red-60);
   border-bottom-style: solid;
   border-bottom-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-primary);
-  padding-left: calc(.75rem + .125rem);
-  padding-right: calc(.75rem + .125rem);
-  padding-top: calc(.5rem + .125rem);
-}
-
-.emotion-4:focus,
-.emotion-4[data-focus] {
-  border-color: var(--tonic-colors-red-60);
-  color: var(--tonic-colors-white-primary);
+  padding-bottom: calc(1rem - .125rem);
 }
 
 .emotion-4:hover,
 .emotion-4[data-hover] {
-  border: none;
   border-bottom-color: var(--tonic-colors-red-60);
   border-bottom-style: solid;
   border-bottom-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-primary);
-  padding-left: calc(.75rem + .125rem);
-  padding-right: calc(.75rem + .125rem);
-  padding-top: calc(.5rem + .125rem);
+  padding-bottom: calc(1rem - .125rem);
 }
 
 .emotion-6 {
@@ -93,9 +86,6 @@ exports[`Tabs should render correctly 1`] = `
   padding: 0;
   font-size: var(--tonic-fontSizes-sm);
   line-height: var(--tonic-lineHeights-sm);
-  border-color: var(--tonic-colors-transparent);
-  border-style: solid;
-  border-width: var(--tonic-sizes-1h);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -104,40 +94,36 @@ exports[`Tabs should render correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding-left: var(--tonic-space-3x);
-  padding-right: var(--tonic-space-3x);
-  padding-top: var(--tonic-space-2x);
-  padding-bottom: var(--tonic-space-2x);
+  padding-left: var(--tonic-space-4x);
+  padding-right: var(--tonic-space-4x);
+  padding-top: calc(.5rem + .125rem);
+  padding-bottom: calc(.5rem + .125rem);
+}
+
+.emotion-6:focus-visible {
+  outline-color: var(--tonic-colors-blue-60);
+  outline-width: var(--tonic-sizes-1h);
+  outline-style: solid;
+  outline-offset: calc(var(--tonic-space-1h) * -1);
+  color: var(--tonic-colors-white-primary);
 }
 
 .emotion-6[aria-selected=true],
 .emotion-6[data-selected] {
-  border: none;
   border-bottom-color: var(--tonic-colors-red-60);
   border-bottom-style: solid;
   border-bottom-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-primary);
-  padding-left: calc(.75rem + .125rem);
-  padding-right: calc(.75rem + .125rem);
-  padding-top: calc(.5rem + .125rem);
-}
-
-.emotion-6:focus,
-.emotion-6[data-focus] {
-  border-color: var(--tonic-colors-blue-60);
-  color: var(--tonic-colors-white-primary);
+  padding-bottom: calc(1rem - .125rem);
 }
 
 .emotion-6:hover,
 .emotion-6[data-hover] {
-  border: none;
   border-bottom-color: var(--tonic-colors-gray-60);
   border-bottom-style: solid;
   border-bottom-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-primary);
-  padding-left: calc(.75rem + .125rem);
-  padding-right: calc(.75rem + .125rem);
-  padding-top: calc(.5rem + .125rem);
+  padding-bottom: calc(1rem - .125rem);
 }
 
 .emotion-8 {
@@ -153,9 +139,6 @@ exports[`Tabs should render correctly 1`] = `
   padding: 0;
   font-size: var(--tonic-fontSizes-sm);
   line-height: var(--tonic-lineHeights-sm);
-  border-color: var(--tonic-colors-transparent);
-  border-style: solid;
-  border-width: var(--tonic-sizes-1h);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164,40 +147,36 @@ exports[`Tabs should render correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding-left: var(--tonic-space-3x);
-  padding-right: var(--tonic-space-3x);
-  padding-top: var(--tonic-space-2x);
-  padding-bottom: var(--tonic-space-2x);
+  padding-left: var(--tonic-space-4x);
+  padding-right: var(--tonic-space-4x);
+  padding-top: calc(.5rem + .125rem);
+  padding-bottom: calc(.5rem + .125rem);
+}
+
+.emotion-8:focus-visible {
+  outline-color: var(--tonic-colors-transparent);
+  outline-width: var(--tonic-sizes-1h);
+  outline-style: solid;
+  outline-offset: calc(var(--tonic-space-1h) * -1);
+  color: var(--tonic-colors-white-disabled);
 }
 
 .emotion-8[aria-selected=true],
 .emotion-8[data-selected] {
-  border: none;
   border-bottom-color: var(--tonic-colors-transparent);
   border-bottom-style: solid;
   border-bottom-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-disabled);
-  padding-left: calc(.75rem + .125rem);
-  padding-right: calc(.75rem + .125rem);
-  padding-top: calc(.5rem + .125rem);
-}
-
-.emotion-8:focus,
-.emotion-8[data-focus] {
-  border-color: var(--tonic-colors-transparent);
-  color: var(--tonic-colors-white-disabled);
+  padding-bottom: calc(1rem - .125rem);
 }
 
 .emotion-8:hover,
 .emotion-8[data-hover] {
-  border: none;
   border-bottom-color: var(--tonic-colors-transparent);
   border-bottom-style: solid;
   border-bottom-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-disabled);
-  padding-left: calc(.75rem + .125rem);
-  padding-right: calc(.75rem + .125rem);
-  padding-top: calc(.5rem + .125rem);
+  padding-bottom: calc(1rem - .125rem);
 }
 
 .emotion-10 {
diff --git a/packages/react/src/tabs/styles.js b/packages/react/src/tabs/styles.js
index 94e04e10a8..734b5deb99 100644
--- a/packages/react/src/tabs/styles.js
+++ b/packages/react/src/tabs/styles.js
@@ -24,7 +24,7 @@ const useTabStyle = ({
   if (variant === 'default') {
     // border color
     const disabledBorderColor = 'transparent';
-    const focusBorderColor = {
+    const focusVisibleBorderColor = {
       dark: 'blue:60',
       light: 'blue:60',
     }[colorMode];
@@ -89,61 +89,61 @@ const useTabStyle = ({
       return fallbackColor;
     };
 
-    const selectedPaddingXKey = {
-      'horizontal': 'px',
-      'vertical': 'pr',
-    }[orientation];
-    const selectedPaddingYKey = {
-      'horizontal': 'pt',
-      'vertical': 'py',
-    }[orientation];
-    const selectedBorderColorKey = {
+    const borderColorKey = {
       'horizontal': 'borderBottomColor',
       'vertical': 'borderLeftColor',
     }[orientation];
-    const selectedBorderStyleKey = {
+    const borderStyleKey = {
       'horizontal': 'borderBottomStyle',
       'vertical': 'borderLeftStyle',
     }[orientation];
-    const selectedBorderWidthKey = {
+    const borderWidthKey = {
       'horizontal': 'borderBottomWidth',
       'vertical': 'borderLeftWidth',
     }[orientation];
 
+    const paddingStyle = {};
+
+    if (orientation === 'horizontal') {
+      paddingStyle.px = '4x';
+      paddingStyle.pt = `calc(${sizes?.['2x']} + ${sizes?.['1h']})`;
+      paddingStyle.pb = '2x';
+    } else {
+      paddingStyle.pl = `calc(${sizes?.['4x']} - ${sizes?.['1h']})`;
+      paddingStyle.pr = '4x';
+      paddingStyle.py = `calc(${sizes?.['2x']} + ${sizes?.['1h']})`;
+    }
+
     return {
       fontSize: 'sm',
       lineHeight: 'sm',
-      borderColor: 'transparent',
-      borderStyle: 'solid',
-      borderWidth: '1h',
       color: getColorStyleWithFallback(color),
       cursor: getCursorStyle(),
       display: 'flex',
       alignItems: 'center',
-      px: '3x',
-      py: '2x',
+      ...paddingStyle,
+      [borderColorKey]: 'transparent',
+      [borderStyleKey]: 'solid',
+      [borderWidthKey]: '1h',
       outline: (tabIndex < 0) ? 0 : undefined, // Remove the default outline for tabindex="-1"
       _hover: {
-        border: 'none',
-        [selectedBorderColorKey]: getBorderColorStyleWithFallback(hoverBorderColor),
-        [selectedBorderStyleKey]: 'solid',
-        [selectedBorderWidthKey]: '1h',
+        [borderColorKey]: getBorderColorStyleWithFallback(hoverBorderColor),
+        [borderStyleKey]: 'solid',
+        [borderWidthKey]: '1h',
         color: getColorStyleWithFallback(hoverColor),
-        [selectedPaddingXKey]: `calc(${sizes?.['3x']} + ${sizes?.['1h']})`,
-        [selectedPaddingYKey]: `calc(${sizes?.['2x']} + ${sizes?.['1h']})`,
       },
-      _focus: {
-        borderColor: getBorderColorStyleWithFallback(focusBorderColor),
+      _focusVisible: {
+        outlineColor: getBorderColorStyleWithFallback(focusVisibleBorderColor),
+        outlineWidth: '1h',
+        outlineStyle: 'solid',
+        outlineOffset: '-1h',
         color: getColorStyleWithFallback(focusColor),
       },
       _selected: {
-        border: 'none',
-        [selectedBorderColorKey]: getBorderColorStyleWithFallback(selectedBorderColor),
-        [selectedBorderStyleKey]: 'solid',
-        [selectedBorderWidthKey]: '1h',
+        [borderColorKey]: getBorderColorStyleWithFallback(selectedBorderColor),
+        [borderStyleKey]: 'solid',
+        [borderWidthKey]: '1h',
         color: getColorStyleWithFallback(selectedColor),
-        [selectedPaddingXKey]: `calc(${sizes?.['3x']} + ${sizes?.['1h']})`,
-        [selectedPaddingYKey]: `calc(${sizes?.['2x']} + ${sizes?.['1h']})`,
       },
     };
   }
@@ -180,7 +180,7 @@ const useTabStyle = ({
       dark: 'gray:80',
       light: 'gray:20',
     }[colorMode];
-    const focusBorderColor = {
+    const focusVisibleBorderColor = {
       dark: 'blue:60',
       light: 'blue:60',
     }[colorMode];
@@ -282,9 +282,9 @@ const useTabStyle = ({
         borderColor: getBorderColorStyleWithFallback(hoverBorderColor),
         color: getColorStyleWithFallback(hoverColor),
       },
-      _focus: {
+      _focusVisible: {
         backgroundColor: getBackgroundColorStyleWithFallback(focusBackgroundColor),
-        borderColor: getBorderColorStyleWithFallback(focusBorderColor),
+        borderColor: getBorderColorStyleWithFallback(focusVisibleBorderColor),
         borderStyle: 'solid',
         borderWidth: '1h',
         color: getColorStyleWithFallback(focusColor),