diff --git a/packages/eui/src/components/form/file_picker/file_picker.styles.ts b/packages/eui/src/components/form/file_picker/file_picker.styles.ts
index 5ef8d6a18eb..de99d1d84fa 100644
--- a/packages/eui/src/components/form/file_picker/file_picker.styles.ts
+++ b/packages/eui/src/components/form/file_picker/file_picker.styles.ts
@@ -105,7 +105,11 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
           background-color ${euiTheme.animation.fast} ease-in;
       }
     `,
-    disabled: css(formStyles.disabled),
+    disabled: css`
+      --euiFormControlStateColor: ${formVariables.borderDisabledColor};
+      ${formStyles.disabled}
+      box-shadow: none;
+    `,
 
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx
index 0cca8631552..677348fd5c9 100644
--- a/packages/eui/src/components/form/form.styles.test.tsx
+++ b/packages/eui/src/components/form/form.styles.test.tsx
@@ -31,6 +31,7 @@ describe('euiFormVariables', () => {
         "backgroundDisabledColor": "#eef1f7",
         "backgroundReadOnlyColor": "#FFF",
         "borderColor": "rgba(38,43,53,0.5)",
+        "borderDisabledColor": "rgba(38,43,53,0.2)",
         "controlBorderRadius": "6px",
         "controlBoxShadow": "0 0 transparent",
         "controlCompressedBorderRadius": "4px",
@@ -102,6 +103,7 @@ describe('euiFormControlStyles', () => {
           /* Required for Safari */
           -webkit-text-fill-color: #98A2B3;
           background-color: #eef1f7;
+          box-shadow: inset 0 0 0 1px rgba(38,43,53,0.2);
           cursor: not-allowed;
 
           
@@ -143,7 +145,7 @@ describe('euiFormControlStyles', () => {
           ",
         "inGroup": "
             block-size: 100%;
-            box-shadow: none;
+            box-shadow: none !important;
             border-radius: 0;
           ",
         "invalid": "
@@ -157,6 +159,7 @@ describe('euiFormControlStyles', () => {
 
           background-color: #FFF;
           --euiFormControlStateColor: transparent;
+          box-shadow: inset 0 0 0 1px rgba(38,43,53,0.2);
         ",
         "shared": "
             
diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts
index b7613c73537..9d83b0730aa 100644
--- a/packages/eui/src/components/form/form.styles.ts
+++ b/packages/eui/src/components/form/form.styles.ts
@@ -55,6 +55,9 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
         : darken(euiTheme.border.color, 3.85),
       0.5
     ),
+    get borderDisabledColor() {
+      return transparentize(this.borderColor, 0.2);
+    },
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)(
@@ -145,7 +148,7 @@ export const euiFormControlStyles = (euiThemeContext: UseEuiTheme) => {
     // In group
     inGroup: `
       ${logicalCSS('height', '100%')}
-      box-shadow: none;
+      box-shadow: none !important;
       border-radius: 0;
     `,
 
@@ -231,7 +234,7 @@ export const euiFormControlDefaultShadow = (euiThemeContext: UseEuiTheme) => {
   return `
     /* We use inset box-shadow instead of border to skip extra hight calculations */
     border: none;
-    box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${form.borderColor};
+    box-shadow: ${_borderShadow(euiThemeContext, form.borderColor)};
     background-color: ${form.backgroundColor};
 
     background-repeat: no-repeat;
@@ -280,6 +283,7 @@ export const euiFormControlDisabledStyles = (euiThemeContext: UseEuiTheme) => {
     /* Required for Safari */
     -webkit-text-fill-color: ${form.controlDisabledColor};
     background-color: ${form.backgroundDisabledColor};
+    box-shadow: ${_borderShadow(euiThemeContext, form.borderDisabledColor)};
     cursor: not-allowed;
 
     ${euiPlaceholderPerBrowser(`
@@ -299,6 +303,7 @@ export const euiFormControlReadOnlyStyles = (euiThemeContext: UseEuiTheme) => {
 
     background-color: ${form.backgroundReadOnlyColor};
     --euiFormControlStateColor: transparent;
+    box-shadow: ${_borderShadow(euiThemeContext, form.borderDisabledColor)};
   `;
 };
 
@@ -319,19 +324,20 @@ export const euiFormControlAutoFillStyles = (euiThemeContext: UseEuiTheme) => {
 
   // Re-create the border, since the above webkit box shadow overrides the default border box-shadow
   // + change the border color to match states, since the underline background gradient no longer works
-  const borderColor = transparentize(euiTheme.colors.primaryText, 0.2);
-  const invalidBorder = euiTheme.colors.danger;
-  const borderShadow = (color: string) =>
-    `inset 0 0 0 ${euiTheme.border.width.thin} ${color}`;
+  const autofillBorder = _borderShadow(
+    euiThemeContext,
+    transparentize(euiTheme.colors.primaryText, 0.2)
+  );
+  const invalidBorder = _borderShadow(euiThemeContext, euiTheme.colors.danger);
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
   return `
     &:-webkit-autofill {
       -webkit-text-fill-color: ${textColor};
-      -webkit-box-shadow: ${borderShadow(borderColor)}, ${backgroundShadow};
+      -webkit-box-shadow: ${autofillBorder}, ${backgroundShadow};
 
       &:invalid {
-        -webkit-box-shadow: ${borderShadow(invalidBorder)}, ${backgroundShadow};
+        -webkit-box-shadow: ${invalidBorder}, ${backgroundShadow};
       }
     }
   `;
@@ -344,3 +350,7 @@ const euiPlaceholderPerBrowser = (content: string) => `
   &:-moz-placeholder { ${content} }
   &::placeholder { ${content} }
 `;
+
+// EUI uses inset box-shadow instead of border to skip extra hight calculations
+const _borderShadow = ({ euiTheme }: UseEuiTheme, color: string) =>
+  `inset 0 0 0 ${euiTheme.border.width.thin} ${color}`;
diff --git a/packages/eui/src/global_styling/variables/_form.scss b/packages/eui/src/global_styling/variables/_form.scss
index 586015886f0..a824e5bfc5d 100644
--- a/packages/eui/src/global_styling/variables/_form.scss
+++ b/packages/eui/src/global_styling/variables/_form.scss
@@ -31,7 +31,7 @@ $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
 $euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default;
 $euiFormBorderOpaqueColor: $euiBorderColor !default;
 $euiFormBorderColor: transparentize(shadeOrTint($euiFormBorderOpaqueColor, 82%, 62%), .5) !default;
-$euiFormBorderDisabledColor: $euiFormBorderColor !default;
+$euiFormBorderDisabledColor: transparentize($euiFormBorderColor, .3) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;