diff --git a/src/accordion/__tests__/accordion.stories.tsx b/src/accordion/__tests__/accordion.stories.tsx
index 16cec9838a..b15fc41d46 100644
--- a/src/accordion/__tests__/accordion.stories.tsx
+++ b/src/accordion/__tests__/accordion.stories.tsx
@@ -53,6 +53,66 @@ const myCustomAccordionTheme = createTheme({
           iconColor: '{{colors.inkInverse}}',
         },
       },
+      customOutlineColor: {
+        base: {
+          backgroundColor: '{{colors.interface010}}',
+          color: '{{colors.inkBase}}',
+          borderStyle: 'none none solid none',
+          borderColor: '{{colors.interface050}}',
+          borderWidth: '{{borders.borderWidth010}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          backgroundColor: '{{colors.interface010}}',
+          color: '{{colors.inkBase}}',
+          borderStyle: 'none none solid none',
+          borderColor: '{{colors.interface050}}',
+          borderWidth: '{{borders.borderWidth010}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          backgroundColor: '{{colors.interface010}}',
+          color: '{{colors.inkBase}}',
+          borderStyle: 'none none solid none',
+          borderColor: '{{colors.interface050}}',
+          borderWidth: '{{borders.borderWidth010}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          backgroundColor: '{{colors.interface010}}',
+          color: '{{colors.inkBase}}',
+          borderStyle: 'none none solid none',
+          borderColor: '{{colors.interface050}}',
+          borderWidth: '{{borders.borderWidth010}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '5px',
+        },
+      },
     },
   },
 });
@@ -356,3 +416,97 @@ export const StoryAccordionGroupControlled = () => {
   );
 };
 StoryAccordionGroupControlled.storyName = 'accordion-group-controlled';
+
+export const StoryAccordionOutlineOverrides = () => (
+  <>
+    <ThemeProvider theme={myCustomAccordionTheme}>
+      <StorybookSubHeading>Accordion Outline Overrides</StorybookSubHeading>
+      <Spacer>
+        <Accordion
+          header={
+            <StyledBlock>
+              <IconFilledAccountBalance
+                overrides={{size: 'iconSize020', marginInlineEnd: '8px'}}
+              />
+              Custom Color
+            </StyledBlock>
+          }
+          label="Hide"
+          expanded
+          overrides={{
+            header: {
+              stylePreset: 'customOutlineColor',
+            },
+          }}
+        >
+          {content}
+        </Accordion>
+      </Spacer>
+      <Spacer>
+        <Accordion
+          header={
+            <StyledBlock>
+              <IconFilledAccountBalance
+                overrides={{size: 'iconSize020', marginInlineEnd: '8px'}}
+              />
+              Custom Style
+            </StyledBlock>
+          }
+          label="Hide"
+          expanded
+          overrides={{
+            header: {
+              stylePreset: 'customOutlineStyle',
+            },
+          }}
+        >
+          {content}
+        </Accordion>
+      </Spacer>
+      <Spacer>
+        <Accordion
+          header={
+            <StyledBlock>
+              <IconFilledAccountBalance
+                overrides={{size: 'iconSize020', marginInlineEnd: '8px'}}
+              />
+              Custom Width
+            </StyledBlock>
+          }
+          label="Hide"
+          expanded
+          overrides={{
+            header: {
+              stylePreset: 'customOutlineWidth',
+            },
+          }}
+        >
+          {content}
+        </Accordion>
+      </Spacer>
+      <Spacer>
+        <Accordion
+          header={
+            <StyledBlock>
+              <IconFilledAccountBalance
+                overrides={{size: 'iconSize020', marginInlineEnd: '8px'}}
+              />
+              Custom Offset
+            </StyledBlock>
+          }
+          label="Hide"
+          expanded
+          overrides={{
+            header: {
+              stylePreset: 'customOutlineOffset',
+            },
+          }}
+        >
+          {content}
+        </Accordion>
+      </Spacer>
+    </ThemeProvider>
+  </>
+);
+
+StoryAccordionOutlineOverrides.storyName = 'accordion-with-outline-overrides';
diff --git a/src/button/__tests__/button.stories.tsx b/src/button/__tests__/button.stories.tsx
index 5222b2ed97..59d447d96c 100644
--- a/src/button/__tests__/button.stories.tsx
+++ b/src/button/__tests__/button.stories.tsx
@@ -73,6 +73,62 @@ const myCustomTheme = createTheme({
           backgroundColor: 'transparent',
         },
       },
+      customOutlineColor: {
+        base: {
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkInverse}}',
+          iconColor: '{{colors.inkInverse}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkInverse}}',
+          iconColor: '{{colors.inkInverse}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkInverse}}',
+          iconColor: '{{colors.inkInverse}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkInverse}}',
+          iconColor: '{{colors.inkInverse}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '5px',
+        },
+      },
     },
   },
 });
@@ -633,3 +689,28 @@ export const StoryButtonWithTransitions = () => (
   </>
 );
 StoryButtonWithTransitions.storyName = 'button-with-transition';
+
+export const StoryButtonWithOutlineOverride = () => (
+  <>
+    <StorybookSubHeading>Button with custom outline</StorybookSubHeading>
+    <ThemeProvider theme={myCustomTheme}>
+      <StorybookSubHeading>Custom Color</StorybookSubHeading>
+      <Container>
+        <Button overrides={{stylePreset: 'customOutlineColor'}}>Button</Button>
+      </Container>
+      <StorybookSubHeading>Custom Style</StorybookSubHeading>
+      <Container>
+        <Button overrides={{stylePreset: 'customOutlineStyle'}}>Button</Button>
+      </Container>
+      <StorybookSubHeading>Custom Width</StorybookSubHeading>
+      <Container>
+        <Button overrides={{stylePreset: 'customOutlineWidth'}}>Button</Button>
+      </Container>
+      <StorybookSubHeading>Custom Offset</StorybookSubHeading>
+      <Container>
+        <Button overrides={{stylePreset: 'customOutlineOffset'}}>Button</Button>
+      </Container>
+    </ThemeProvider>
+  </>
+);
+StoryButtonWithOutlineOverride.storyName = 'button-with-outline-overrides';
diff --git a/src/checkbox/__tests__/checkbox.stories.tsx b/src/checkbox/__tests__/checkbox.stories.tsx
index 81974645f8..6ac6a2037e 100644
--- a/src/checkbox/__tests__/checkbox.stories.tsx
+++ b/src/checkbox/__tests__/checkbox.stories.tsx
@@ -16,7 +16,6 @@ import {
 } from '../..';
 import {CheckboxIconProps} from '../types';
 import {states, sizes} from './helpers';
-import {defaultFocusVisible} from '../../utils/default-focus-visible';
 
 const myCustomTheme = compileTheme(
   createTheme({
@@ -35,7 +34,6 @@ const myCustomTheme = compileTheme(
           hover: {
             backgroundColor: 'blue',
           },
-          'focus-visible': defaultFocusVisible,
         },
         customCheckboxFeedback: {
           base: {
@@ -49,6 +47,70 @@ const myCustomTheme = compileTheme(
             iconColor: '{{colors.inkInverse}}',
           },
         },
+        customOutlineColor: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput010}}',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusRounded010}}',
+            borderStyle: 'solid',
+            iconColor: '{{colors.inkInverse}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: '{{outlines.outlineStyleDefault}}',
+            outlineWidth: '{{outlines.outlineWidthDefault}}',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineStyle: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput010}}',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusRounded010}}',
+            borderStyle: 'solid',
+            iconColor: '{{colors.inkInverse}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '{{outlines.outlineWidthDefault}}',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineWidth: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput010}}',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusRounded010}}',
+            borderStyle: 'solid',
+            iconColor: '{{colors.inkInverse}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '5px',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineOffset: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput010}}',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusRounded010}}',
+            borderStyle: 'solid',
+            iconColor: '{{colors.inkInverse}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '5px',
+            outlineOffset: '5px',
+          },
+        },
       },
     },
   }),
@@ -293,3 +355,47 @@ export const StoryCheckboxTransitions = () => (
 );
 
 StoryCheckboxTransitions.storyName = 'checkbox-transitions';
+
+export const StoryCheckboxOutlineOverride = () => (
+  <ThemeProvider theme={myCustomTheme}>
+    <StorybookSubHeading>Checkbox Outline override</StorybookSubHeading>
+    <Container>
+      <GridLayout rowGap="space040">
+        <Checkbox
+          overrides={{
+            input: {
+              stylePreset: 'customOutlineColor',
+            },
+          }}
+          label="Custom Color"
+        />
+        <Checkbox
+          overrides={{
+            input: {
+              stylePreset: 'customOutlineStyle',
+            },
+          }}
+          label="Custom Style"
+        />
+        <Checkbox
+          overrides={{
+            input: {
+              stylePreset: 'customOutlineWidth',
+            },
+          }}
+          label="Custom Width"
+        />
+        <Checkbox
+          overrides={{
+            input: {
+              stylePreset: 'customOutlineOffset',
+            },
+          }}
+          label="Custom Offset"
+        />
+      </GridLayout>
+    </Container>
+  </ThemeProvider>
+);
+
+StoryCheckboxOutlineOverride.storyName = 'checkbox-outline-override';
diff --git a/src/icon-button/__tests__/icon-button.stories.tsx b/src/icon-button/__tests__/icon-button.stories.tsx
index 7c3b872e51..6b27cc5efd 100644
--- a/src/icon-button/__tests__/icon-button.stories.tsx
+++ b/src/icon-button/__tests__/icon-button.stories.tsx
@@ -14,6 +14,71 @@ import {
   ButtonOverrides,
   ButtonSize,
 } from '../..';
+import {ThemeProvider, createTheme} from '../../theme';
+
+const myCustomTheme = createTheme({
+  name: 'my-custom-text-input-theme',
+  overrides: {
+    stylePresets: {
+      customOutlineColor: {
+        base: {
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderRadius: '{{borders.borderRadiusCircle}}',
+          color: '{{colors.inkInverse}}',
+          iconColor: '{{colors.inkInverse}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderRadius: '{{borders.borderRadiusCircle}}',
+          color: '{{colors.inkInverse}}',
+          iconColor: '{{colors.inkInverse}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderRadius: '{{borders.borderRadiusCircle}}',
+          color: '{{colors.inkInverse}}',
+          iconColor: '{{colors.inkInverse}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderRadius: '{{borders.borderRadiusCircle}}',
+          color: '{{colors.inkInverse}}',
+          iconColor: '{{colors.inkInverse}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '5px',
+        },
+      },
+    },
+  },
+});
 
 const Container = styled.div`
   margin: 24px;
@@ -275,3 +340,53 @@ export const StoryIconButtonOverrides = () => (
   </>
 );
 StoryIconButtonOverrides.storyName = 'icon-button-overrides';
+
+export const StoryIconButtonWithOutlineOverride = () => (
+  <>
+    <StorybookSubHeading>Icon Button with custom outline</StorybookSubHeading>
+    <ThemeProvider theme={myCustomTheme}>
+      <StorybookSubHeading>Custom Color</StorybookSubHeading>
+      <Container>
+        <IconButton
+          aria-label="Link icon"
+          href="https://www.newskit.co.uk/"
+          overrides={{stylePreset: 'customOutlineColor'}}
+        >
+          <IconFilledLink />
+        </IconButton>
+      </Container>
+      <StorybookSubHeading>Custom Style</StorybookSubHeading>
+      <Container>
+        <IconButton
+          aria-label="Link icon"
+          href="https://www.newskit.co.uk/"
+          overrides={{stylePreset: 'customOutlineStyle'}}
+        >
+          <IconFilledLink />
+        </IconButton>
+      </Container>
+      <StorybookSubHeading>Custom Width</StorybookSubHeading>
+      <Container>
+        <IconButton
+          aria-label="Link icon"
+          href="https://www.newskit.co.uk/"
+          overrides={{stylePreset: 'customOutlineWidth'}}
+        >
+          <IconFilledLink />
+        </IconButton>
+      </Container>
+      <StorybookSubHeading>Custom Offset</StorybookSubHeading>
+      <Container>
+        <IconButton
+          aria-label="Link icon"
+          href="https://www.newskit.co.uk/"
+          overrides={{stylePreset: 'customOutlineOffset'}}
+        >
+          <IconFilledLink />
+        </IconButton>
+      </Container>
+    </ThemeProvider>
+  </>
+);
+StoryIconButtonWithOutlineOverride.storyName =
+  'icon-button-with-outline-overrides';
diff --git a/src/link/__tests__/link.stories.tsx b/src/link/__tests__/link.stories.tsx
index d7f8f26588..25007b9a76 100644
--- a/src/link/__tests__/link.stories.tsx
+++ b/src/link/__tests__/link.stories.tsx
@@ -30,6 +30,58 @@ const myCustomTheme = createTheme({
         },
         'focus-visible': defaultFocusVisible,
       },
+      customOutlineColor: {
+        base: {
+          color: '{{colors.interactivePrimary030}}',
+          iconColor: '{{colors.interactivePrimary030}}',
+          textDecoration: 'none',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          color: '{{colors.interactivePrimary030}}',
+          iconColor: '{{colors.interactivePrimary030}}',
+          textDecoration: 'none',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          color: '{{colors.interactivePrimary030}}',
+          iconColor: '{{colors.interactivePrimary030}}',
+          textDecoration: 'none',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          color: '{{colors.interactivePrimary030}}',
+          iconColor: '{{colors.interactivePrimary030}}',
+          textDecoration: 'none',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '5px',
+        },
+      },
     },
   },
 });
@@ -568,3 +620,52 @@ export const StoryLinkWithLogicalPropsOverrides = () => (
 );
 StoryLinkWithLogicalPropsOverrides.storyName =
   'link-with-logical-props-overrides';
+
+export const StoryLinkOutlineOverride = () => (
+  <Container>
+    <StorybookHeading>Outline overrides</StorybookHeading>
+    <ThemeProvider theme={myCustomTheme}>
+      <LinkInline
+        href="/"
+        overrides={{
+          stylePreset: 'customOutlineColor',
+        }}
+      >
+        Custom Color
+      </LinkInline>
+      <br />
+      <br />
+      <LinkInline
+        href="/"
+        overrides={{
+          stylePreset: 'customOutlineStyle',
+        }}
+      >
+        Custom Style
+      </LinkInline>
+      <br />
+      <br />
+      <LinkInline
+        href="/"
+        overrides={{
+          stylePreset: 'customOutlineWidth',
+        }}
+      >
+        Custom Width
+      </LinkInline>
+      <br />
+      <br />
+      <LinkInline
+        href="/"
+        overrides={{
+          stylePreset: 'customOutlineOffset',
+        }}
+      >
+        Custom Offset
+      </LinkInline>
+      <br />
+      <br />
+    </ThemeProvider>
+  </Container>
+);
+StoryLinkOutlineOverride.storyName = 'link with outline override';
diff --git a/src/menu/__tests__/menu.stories.tsx b/src/menu/__tests__/menu.stories.tsx
index 1125d2ebc9..128f2b1ef9 100644
--- a/src/menu/__tests__/menu.stories.tsx
+++ b/src/menu/__tests__/menu.stories.tsx
@@ -39,6 +39,74 @@ const myCustomTheme = compileTheme(
             iconColor: '{{colors.inkBrand010}}',
           },
         },
+        customOutlineColor: {
+          base: {
+            backgroundColor: '{{colors.transparent}}',
+            borderStyle: 'solid',
+            borderColor: '{{colors.transparent}}',
+            borderWidth:
+              '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth020}} {{borders.borderWidth000}}',
+            color: '{{colors.inkSubtle}}',
+            iconColor: '{{colors.inkSubtle}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: '{{outlines.outlineStyleDefault}}',
+            outlineWidth: '{{outlines.outlineWidthDefault}}',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineStyle: {
+          base: {
+            backgroundColor: '{{colors.transparent}}',
+            borderStyle: 'solid',
+            borderColor: '{{colors.transparent}}',
+            borderWidth:
+              '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth020}} {{borders.borderWidth000}}',
+            color: '{{colors.inkSubtle}}',
+            iconColor: '{{colors.inkSubtle}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '{{outlines.outlineWidthDefault}}',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineWidth: {
+          base: {
+            backgroundColor: '{{colors.transparent}}',
+            borderStyle: 'solid',
+            borderColor: '{{colors.transparent}}',
+            borderWidth:
+              '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth020}} {{borders.borderWidth000}}',
+            color: '{{colors.inkSubtle}}',
+            iconColor: '{{colors.inkSubtle}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '5px',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineOffset: {
+          base: {
+            backgroundColor: '{{colors.transparent}}',
+            borderStyle: 'solid',
+            borderColor: '{{colors.transparent}}',
+            borderWidth:
+              '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth020}} {{borders.borderWidth000}}',
+            color: '{{colors.inkSubtle}}',
+            iconColor: '{{colors.inkSubtle}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '5px',
+            outlineOffset: '5px',
+          },
+        },
       },
     },
   }),
@@ -1248,3 +1316,28 @@ export const StoryMenuLogicalProps = () => (
   </>
 );
 StoryMenuLogicalProps.storyName = 'menu - logical props';
+
+export const StoryMenuItemsOutlineOverrides = () => (
+  <>
+    <ThemeProvider theme={myCustomTheme}>
+      <StorybookHeading>Menu items with overrides</StorybookHeading>
+      <Menu aria-label={`Menu ${getSSRId()}`}>
+        <MenuItem href={href} overrides={{stylePreset: 'customOutlineColor'}}>
+          Custom Color
+        </MenuItem>
+        <MenuItem href={href} overrides={{stylePreset: 'customOutlineStyle'}}>
+          Custom Style
+        </MenuItem>
+        <MenuItem href={href} overrides={{stylePreset: 'customOutlineWidth'}}>
+          Custom Width
+        </MenuItem>
+        <MenuItem href={href} overrides={{stylePreset: 'customOutlineOffset'}}>
+          Custom Offset
+        </MenuItem>
+      </Menu>
+      <br />
+      <br />
+    </ThemeProvider>
+  </>
+);
+StoryMenuItemsOutlineOverrides.storyName = 'menu items outline overrides';
diff --git a/src/radio-button/__tests__/radio-button.stories.tsx b/src/radio-button/__tests__/radio-button.stories.tsx
index c8568913a9..afd65705e6 100644
--- a/src/radio-button/__tests__/radio-button.stories.tsx
+++ b/src/radio-button/__tests__/radio-button.stories.tsx
@@ -221,6 +221,66 @@ const myCustomTheme = compileTheme(
             borderRadius: '50%',
           },
         },
+        customOutlineColor: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput010}}',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusCircle}}',
+            borderStyle: 'solid',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: '{{outlines.outlineStyleDefault}}',
+            outlineWidth: '{{outlines.outlineWidthDefault}}',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineStyle: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput010}}',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusCircle}}',
+            borderStyle: 'solid',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '{{outlines.outlineWidthDefault}}',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineWidth: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput010}}',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusCircle}}',
+            borderStyle: 'solid',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '5px',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineOffset: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput010}}',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusCircle}}',
+            borderStyle: 'solid',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '5px',
+            outlineOffset: '5px',
+          },
+        },
       },
     },
   }),
@@ -382,3 +442,151 @@ export const StoryRadioButtonLogicalPropsOverrides = () => (
 );
 StoryRadioButtonLogicalPropsOverrides.storyName =
   'radio-button-logical-overrides';
+
+export const StoryRadioButtonOutlineOverrides = () => (
+  <ThemeProvider theme={myCustomTheme}>
+    <Container>
+      <StorybookSubHeading>Radio Button outline override</StorybookSubHeading>
+      <Fieldset legend="Custom Color">
+        <RadioGroup name="color" defaultValue="1">
+          <GridLayout rowGap="space040" columns="max-content">
+            <RadioButton
+              value="1"
+              label="Option 1"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineColor',
+                },
+              }}
+            />
+            <RadioButton
+              value="2"
+              label="Option 2"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineColor',
+                },
+              }}
+            />
+            <RadioButton
+              value="3"
+              label="Option 3"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineColor',
+                },
+              }}
+            />
+          </GridLayout>
+        </RadioGroup>
+      </Fieldset>
+    </Container>
+    <Container>
+      <Fieldset legend="Custom Style">
+        <RadioGroup name="style" defaultValue="1">
+          <GridLayout rowGap="space040" columns="max-content">
+            <RadioButton
+              value="1"
+              label="Option 1"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineStyle',
+                },
+              }}
+            />
+            <RadioButton
+              value="2"
+              label="Option 2"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineStyle',
+                },
+              }}
+            />
+            <RadioButton
+              value="3"
+              label="Option 3"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineStyle',
+                },
+              }}
+            />
+          </GridLayout>
+        </RadioGroup>
+      </Fieldset>
+    </Container>
+    <Container>
+      <Fieldset legend="Custom Width">
+        <RadioGroup name="width" defaultValue="1">
+          <GridLayout rowGap="space040" columns="max-content">
+            <RadioButton
+              value="1"
+              label="Option 1"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineWidth',
+                },
+              }}
+            />
+            <RadioButton
+              value="2"
+              label="Option 2"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineWidth',
+                },
+              }}
+            />
+            <RadioButton
+              value="3"
+              label="Option 3"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineWidth',
+                },
+              }}
+            />
+          </GridLayout>
+        </RadioGroup>
+      </Fieldset>
+    </Container>
+    <Container>
+      <Fieldset legend="Custom Offset">
+        <RadioGroup name="offset" defaultValue="1">
+          <GridLayout rowGap="space040" columns="max-content">
+            <RadioButton
+              value="1"
+              label="Option 1"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineOffset',
+                },
+              }}
+            />
+            <RadioButton
+              value="2"
+              label="Option 2"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineOffset',
+                },
+              }}
+            />
+            <RadioButton
+              value="3"
+              label="Option 3"
+              overrides={{
+                input: {
+                  stylePreset: 'customOutlineOffset',
+                },
+              }}
+            />
+          </GridLayout>
+        </RadioGroup>
+      </Fieldset>
+    </Container>
+  </ThemeProvider>
+);
+
+StoryRadioButtonOutlineOverrides.storyName = 'radio-button-outline-overrides';
diff --git a/src/select/__tests__/select.stories.tsx b/src/select/__tests__/select.stories.tsx
index e57e0e0109..e351e4629f 100644
--- a/src/select/__tests__/select.stories.tsx
+++ b/src/select/__tests__/select.stories.tsx
@@ -408,6 +408,79 @@ const myCustomTheme = createTheme({
           color: '#325C00',
         },
       },
+      customOutlineColor: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveInput020}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkBase}}',
+          textOverflow: 'ellipsis',
+          placeholderColor: '{{colors.inkSubtle}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveInput020}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkBase}}',
+          textOverflow: 'ellipsis',
+          placeholderColor: '{{colors.inkSubtle}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveInput020}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkBase}}',
+          textOverflow: 'ellipsis',
+          placeholderColor: '{{colors.inkSubtle}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveInput020}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkBase}}',
+          textOverflow: 'ellipsis',
+          placeholderColor: '{{colors.inkSubtle}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '5px',
+        },
+      },
     },
   },
 });
@@ -913,4 +986,115 @@ export const SelectVirtualization = () => {
   );
 };
 
-// StorySelectVirtualized.name = "sel"
+export const StoryOutlineOverride = () => (
+  <>
+    <StorybookHeading>Outline override</StorybookHeading>
+    <ThemeProvider theme={myCustomTheme}>
+      <Container>
+        <Stack flow="vertical-left" spaceInline="space040">
+          <Block>
+            <StorybookSubHeading>Custom Color</StorybookSubHeading>
+            <Label htmlFor="id-outline-1" size={'small' as TextFieldSize}>
+              Label
+            </Label>
+            <Select
+              overrides={{
+                button: {
+                  stylePreset: 'customOutlineColor',
+                },
+              }}
+              aria-describedby="id-outline-1-at"
+              id="id-outline-1"
+              size="small"
+            >
+              {items.map(item => (
+                <SelectOption key={item} value={item}>
+                  {item}
+                </SelectOption>
+              ))}
+            </Select>
+            <AssistiveText id="id-outline-1-at" size={'small' as TextFieldSize}>
+              Assistive Text
+            </AssistiveText>
+          </Block>
+          <Block>
+            <StorybookSubHeading>Custom Style</StorybookSubHeading>
+            <Label htmlFor="id-outline-2" size={'small' as TextFieldSize}>
+              Label
+            </Label>
+            <Select
+              overrides={{
+                button: {
+                  stylePreset: 'customOutlineStyle',
+                },
+              }}
+              aria-describedby="id-outline-2-at"
+              id="id-outline-2"
+              size="small"
+            >
+              {items.map(item => (
+                <SelectOption key={item} value={item}>
+                  {item}
+                </SelectOption>
+              ))}
+            </Select>
+            <AssistiveText id="id-outline-2-at" size={'small' as TextFieldSize}>
+              Assistive Text
+            </AssistiveText>
+          </Block>
+          <Block>
+            <StorybookSubHeading>Custom Width</StorybookSubHeading>
+            <Label htmlFor="id-outline-3" size={'small' as TextFieldSize}>
+              Label
+            </Label>
+            <Select
+              overrides={{
+                button: {
+                  stylePreset: 'customOutlineWidth',
+                },
+              }}
+              aria-describedby="id-outline-3-at"
+              id="id-outline-3"
+              size="small"
+            >
+              {items.map(item => (
+                <SelectOption key={item} value={item}>
+                  {item}
+                </SelectOption>
+              ))}
+            </Select>
+            <AssistiveText id="id-outline-3-at" size={'small' as TextFieldSize}>
+              Assistive Text
+            </AssistiveText>
+          </Block>
+          <Block>
+            <StorybookSubHeading>Custom Offset</StorybookSubHeading>
+            <Label htmlFor="id-outline-4" size={'small' as TextFieldSize}>
+              Label
+            </Label>
+            <Select
+              overrides={{
+                button: {
+                  stylePreset: 'customOutlineOffset',
+                },
+              }}
+              aria-describedby="id-outline-4-at"
+              id="id-outline-4"
+              size="small"
+            >
+              {items.map(item => (
+                <SelectOption key={item} value={item}>
+                  {item}
+                </SelectOption>
+              ))}
+            </Select>
+            <AssistiveText id="id-outline-4-at" size={'small' as TextFieldSize}>
+              Assistive Text
+            </AssistiveText>
+          </Block>
+        </Stack>
+      </Container>
+    </ThemeProvider>
+  </>
+);
+StoryOutlineOverride.storyName = 'Select Outline override';
diff --git a/src/slider/__tests__/slider.stories.tsx b/src/slider/__tests__/slider.stories.tsx
index 746b8e26ba..1382b66580 100644
--- a/src/slider/__tests__/slider.stories.tsx
+++ b/src/slider/__tests__/slider.stories.tsx
@@ -3,7 +3,10 @@ import React from 'react';
 import {StatefulSlider} from '..';
 import {styled} from '../../utils/style';
 import {ThumbLabelProps, SliderProps, LabelPosition} from '../types';
-import {StorybookHeading} from '../../test/storybook-comps';
+import {
+  StorybookHeading,
+  StorybookSubHeading,
+} from '../../test/storybook-comps';
 import {createTheme, ThemeProvider} from '../../theme';
 import {IconOutlinedImage} from '../../icons';
 import {withDefaultProps} from '../../utils/with-default-props';
@@ -58,6 +61,74 @@ const myCustomTheme = createTheme({
           iconColor: '{{colors.inkNonEssential}}',
         },
       },
+      customOutlineColor: {
+        base: {
+          boxShadow: '{{shadows.shadow010}}',
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactivePrimary010}}',
+          borderWidth: '{{borders.borderWidth010}}',
+          borderRadius: '{{borders.borderRadiusCircle}}',
+          iconColor: '{{colors.inkNonEssential}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          boxShadow: '{{shadows.shadow010}}',
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactivePrimary010}}',
+          borderWidth: '{{borders.borderWidth010}}',
+          borderRadius: '{{borders.borderRadiusCircle}}',
+          iconColor: '{{colors.inkNonEssential}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          boxShadow: '{{shadows.shadow010}}',
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactivePrimary010}}',
+          borderWidth: '{{borders.borderWidth010}}',
+          borderRadius: '{{borders.borderRadiusCircle}}',
+          iconColor: '{{colors.inkNonEssential}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          boxShadow: '{{shadows.shadow010}}',
+          backgroundColor: '{{colors.interactivePrimary030}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactivePrimary010}}',
+          borderWidth: '{{borders.borderWidth010}}',
+          borderRadius: '{{borders.borderRadiusCircle}}',
+          iconColor: '{{colors.inkNonEssential}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '5px',
+        },
+      },
     },
   },
 });
@@ -500,3 +571,76 @@ export const StorySliderLogicalProps = () => (
   </>
 );
 StorySliderLogicalProps.storyName = 'slider-logical-props';
+
+export const StorySliderWithOutlineOverride = () => (
+  <>
+    <StorybookHeading>Slider with custom outline override</StorybookHeading>
+    <ThemeProvider theme={myCustomTheme}>
+      <StorybookSubHeading>Custom Color</StorybookSubHeading>
+      <ContainerWithBorder>
+        <StatefulSlider
+          values={[50]}
+          max={100}
+          min={0}
+          minLabel="0"
+          maxLabel="100%"
+          thumbLabel
+          overrides={{
+            thumb: {
+              stylePreset: 'customOutlineColor',
+            },
+          }}
+        />
+      </ContainerWithBorder>
+      <StorybookSubHeading>Custom Style</StorybookSubHeading>
+      <ContainerWithBorder>
+        <StatefulSlider
+          values={[50]}
+          max={100}
+          min={0}
+          minLabel="0"
+          maxLabel="100%"
+          thumbLabel
+          overrides={{
+            thumb: {
+              stylePreset: 'customOutlineStyle',
+            },
+          }}
+        />
+      </ContainerWithBorder>
+      <StorybookSubHeading>Custom Width</StorybookSubHeading>
+      <ContainerWithBorder>
+        <StatefulSlider
+          values={[50]}
+          max={100}
+          min={0}
+          minLabel="0"
+          maxLabel="100%"
+          thumbLabel
+          overrides={{
+            thumb: {
+              stylePreset: 'customOutlineWidth',
+            },
+          }}
+        />
+      </ContainerWithBorder>
+      <StorybookSubHeading>Custom Offset</StorybookSubHeading>
+      <ContainerWithBorder>
+        <StatefulSlider
+          values={[50]}
+          max={100}
+          min={0}
+          minLabel="0"
+          maxLabel="100%"
+          thumbLabel
+          overrides={{
+            thumb: {
+              stylePreset: 'customOutlineOffset',
+            },
+          }}
+        />
+      </ContainerWithBorder>
+    </ThemeProvider>
+  </>
+);
+StorySliderWithOutlineOverride.storyName = 'slider-with-custom-outline';
diff --git a/src/switch/__tests__/switch.stories.tsx b/src/switch/__tests__/switch.stories.tsx
index b1926a4a06..03e66fd1b7 100644
--- a/src/switch/__tests__/switch.stories.tsx
+++ b/src/switch/__tests__/switch.stories.tsx
@@ -29,7 +29,7 @@ const Container = styled.div`
   display: flex;
 `;
 
-const borderedThumbTheme = compileTheme(
+const customTheme = compileTheme(
   createTheme({
     name: 'bordered-thumb-theme',
     overrides: {
@@ -44,6 +44,54 @@ const borderedThumbTheme = compileTheme(
             borderWidth: '{{borders.borderWidth010}}',
           },
         },
+        customOutlineColor: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput020}}',
+            borderRadius: '{{borders.borderRadiusPill}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: '{{outlines.outlineStyleDefault}}',
+            outlineWidth: '{{outlines.outlineWidthDefault}}',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineStyle: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput020}}',
+            borderRadius: '{{borders.borderRadiusPill}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '{{outlines.outlineWidthDefault}}',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineWidth: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput020}}',
+            borderRadius: '{{borders.borderRadiusPill}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '5px',
+            outlineOffset: '{{outlines.outlineOffsetDefault}}',
+          },
+        },
+        customOutlineOffset: {
+          base: {
+            backgroundColor: '{{colors.interactiveInput020}}',
+            borderRadius: '{{borders.borderRadiusPill}}',
+          },
+          'focus-visible': {
+            outlineColor: 'red',
+            outlineStyle: 'dotted',
+            outlineWidth: '5px',
+            outlineOffset: '5px',
+          },
+        },
       },
     },
   }),
@@ -111,7 +159,7 @@ export const StorySwitchIcons = () => (
 StorySwitchIcons.storyName = 'switch-icons';
 
 export const StorySwitchOverrides = () => (
-  <ThemeProvider theme={borderedThumbTheme}>
+  <ThemeProvider theme={customTheme}>
     <StorybookHeading>Switch</StorybookHeading>
     <Grid>
       <Cell xs={8} md={4}>
@@ -135,7 +183,7 @@ export const StorySwitchOverrides = () => (
 StorySwitchOverrides.storyName = 'switch-overrides';
 
 export const StorySwitchLabels = () => (
-  <ThemeProvider theme={borderedThumbTheme}>
+  <ThemeProvider theme={customTheme}>
     <StorybookHeading>Switch</StorybookHeading>
     <Grid>
       <Cell xs={8} md={4}>
@@ -225,3 +273,55 @@ export const StorySwitchLogicalProps = () => (
 );
 
 StorySwitchLogicalProps.storyName = 'switch-logical-props';
+
+export const StorySwitchOutlineOverrides = () => (
+  <ThemeProvider theme={customTheme}>
+    <StorybookHeading>Outline overrides</StorybookHeading>
+    <Grid>
+      <Cell xs={8} md={4}>
+        <Container key="Custom Color">
+          <Switch
+            label="Custom Color"
+            overrides={{
+              input: {
+                stylePreset: 'customOutlineColor',
+              },
+            }}
+          />
+        </Container>
+        <Container key="Custom Style">
+          <Switch
+            label="Custom Style"
+            overrides={{
+              input: {
+                stylePreset: 'customOutlineStyle',
+              },
+            }}
+          />
+        </Container>
+        <Container key="Custom Width">
+          <Switch
+            label="Custom Width"
+            overrides={{
+              input: {
+                stylePreset: 'customOutlineWidth',
+              },
+            }}
+          />
+        </Container>
+        <Container key="Custom Offset">
+          <Switch
+            label="Custom Offset"
+            overrides={{
+              input: {
+                stylePreset: 'customOutlineOffset',
+              },
+            }}
+          />
+        </Container>
+      </Cell>
+    </Grid>
+  </ThemeProvider>
+);
+
+StorySwitchOutlineOverrides.storyName = 'switch-outline-overrides';
diff --git a/src/tabs/__tests__/tabs.stories.tsx b/src/tabs/__tests__/tabs.stories.tsx
index 17d132e730..74a9470fb3 100644
--- a/src/tabs/__tests__/tabs.stories.tsx
+++ b/src/tabs/__tests__/tabs.stories.tsx
@@ -53,6 +53,58 @@ const myCustomTabTheme = createTheme({
           color: '{{colors.green060}}',
         },
       },
+      customOutlineColor: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          color: '{{colors.inkBase}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '-2px',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          color: '{{colors.inkBase}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '-2px',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          color: '{{colors.inkBase}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '-2px',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          color: '{{colors.inkBase}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '-5px',
+        },
+      },
     },
   },
 });
@@ -1444,3 +1496,102 @@ export const StoryTagLogicalProps = () => (
   </>
 );
 StoryTagLogicalProps.storyName = 'tabs-logical-props';
+
+export const StoryTabsOutlineOverride = () => (
+  <ThemeProvider theme={myCustomTabTheme}>
+    <StorybookHeading>Tabs Outline Overrides</StorybookHeading>
+
+    <StorybookSubHeading>Custom Color</StorybookSubHeading>
+    <Tabs
+      size={TabSize.Small}
+      distribution={TabsDistribution.Start}
+      divider
+      initialSelectedIndex={10}
+    >
+      <Tab
+        label="H tab 1"
+        key="tab-1"
+        overrides={{stylePreset: 'customOutlineColor'}}
+      >
+        <LoremIpsum textNumber={1} />
+      </Tab>
+      <Tab label={titleCanHaveIcons} key="tab-2">
+        <LoremIpsum textNumber={2} />
+      </Tab>
+      <Tab label="H tab 3, three" key="tab-3">
+        <LoremIpsum textNumber={3} />
+      </Tab>
+    </Tabs>
+    <Spacer />
+
+    <StorybookSubHeading>Custom Style</StorybookSubHeading>
+    <Tabs
+      size={TabSize.Small}
+      distribution={TabsDistribution.Start}
+      divider
+      initialSelectedIndex={10}
+    >
+      <Tab
+        label="H tab 1"
+        key="tab-1"
+        overrides={{stylePreset: 'customOutlineStyle'}}
+      >
+        <LoremIpsum textNumber={1} />
+      </Tab>
+      <Tab label={titleCanHaveIcons} key="tab-2">
+        <LoremIpsum textNumber={2} />
+      </Tab>
+      <Tab label="H tab 3, three" key="tab-3">
+        <LoremIpsum textNumber={3} />
+      </Tab>
+    </Tabs>
+    <Spacer />
+
+    <StorybookSubHeading>Custom Width</StorybookSubHeading>
+    <Tabs
+      size={TabSize.Small}
+      distribution={TabsDistribution.Start}
+      divider
+      initialSelectedIndex={10}
+    >
+      <Tab
+        label="H tab 1"
+        key="tab-1"
+        overrides={{stylePreset: 'customOutlineWidth'}}
+      >
+        <LoremIpsum textNumber={1} />
+      </Tab>
+      <Tab label={titleCanHaveIcons} key="tab-2">
+        <LoremIpsum textNumber={2} />
+      </Tab>
+      <Tab label="H tab 3, three" key="tab-3">
+        <LoremIpsum textNumber={3} />
+      </Tab>
+    </Tabs>
+    <Spacer />
+
+    <StorybookSubHeading>Custom Offset</StorybookSubHeading>
+    <Tabs
+      size={TabSize.Small}
+      distribution={TabsDistribution.Start}
+      divider
+      initialSelectedIndex={10}
+    >
+      <Tab
+        label="H tab 1"
+        key="tab-1"
+        overrides={{stylePreset: 'customOutlineOffset'}}
+      >
+        <LoremIpsum textNumber={1} />
+      </Tab>
+      <Tab label={titleCanHaveIcons} key="tab-2">
+        <LoremIpsum textNumber={2} />
+      </Tab>
+      <Tab label="H tab 3, three" key="tab-3">
+        <LoremIpsum textNumber={3} />
+      </Tab>
+    </Tabs>
+    <Spacer />
+  </ThemeProvider>
+);
+StoryTabsOutlineOverride.storyName = 'tabs-outline-overrides';
diff --git a/src/tag/__tests__/tag.stories.tsx b/src/tag/__tests__/tag.stories.tsx
index 2a1b56f9e0..c84afddf99 100644
--- a/src/tag/__tests__/tag.stories.tsx
+++ b/src/tag/__tests__/tag.stories.tsx
@@ -8,7 +8,6 @@ import {getColorFromTheme, styled} from '../../utils/style';
 import {IconFilledEmail} from '../../icons';
 import {Stack} from '../../stack';
 import {createTheme, ThemeProvider} from '../../theme';
-import {defaultFocusVisible} from '../../utils/default-focus-visible';
 
 const Container = styled.div<{hasBlackBackground?: boolean}>`
   margin: 24px;
@@ -30,7 +29,74 @@ const myCustomTheme = createTheme({
           iconColor: '{{colors.inkInverse}}',
           backgroundColor: '{{colors.red020}}',
         },
-        'focus-visible': defaultFocusVisible,
+      },
+      customOutlineColor: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveSecondary030}}',
+          borderWidth: '{{borders.borderWidth010}}',
+          color: '{{colors.inkBase}}',
+          iconColor: '{{colors.inkBase}}',
+          borderRadius: '{{borders.borderRadiusSharp}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveSecondary030}}',
+          borderWidth: '{{borders.borderWidth010}}',
+          color: '{{colors.inkBase}}',
+          iconColor: '{{colors.inkBase}}',
+          borderRadius: '{{borders.borderRadiusSharp}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveSecondary030}}',
+          borderWidth: '{{borders.borderWidth010}}',
+          color: '{{colors.inkBase}}',
+          iconColor: '{{colors.inkBase}}',
+          borderRadius: '{{borders.borderRadiusSharp}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '{{outlines.outlineOffsetDefault}}',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveSecondary030}}',
+          borderWidth: '{{borders.borderWidth010}}',
+          color: '{{colors.inkBase}}',
+          iconColor: '{{colors.inkBase}}',
+          borderRadius: '{{borders.borderRadiusSharp}}',
+        },
+        'focus-visible': {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '5px',
+        },
       },
     },
   },
@@ -239,7 +305,6 @@ const myCustomThemeTransitions = createTheme({
           backgroundColor: '{{colors.amber070}}',
           borderColor: '{{colors.green040}}',
         },
-        'focus-visible': defaultFocusVisible,
       },
     },
   },
@@ -371,3 +436,46 @@ export const StoryTagLogicalProps = () => (
   </>
 );
 StoryTagLogicalProps.storyName = 'tag-logical-props';
+
+export const StoryTagWithOutlineOverride = () => (
+  <>
+    <StorybookHeading>Tag with outline overrides</StorybookHeading>
+
+    <StorybookSubHeading>with Style Presets overrides</StorybookSubHeading>
+    <Container>
+      <ThemeProvider theme={myCustomTheme}>
+        <Tag
+          href="http://example.com"
+          overrides={{stylePreset: 'customOutlineColor'}}
+        >
+          Custom Color
+        </Tag>
+        <br />
+        <br />
+        <Tag
+          href="http://example.com"
+          overrides={{stylePreset: 'customOutlineStyle'}}
+        >
+          Custom Style
+        </Tag>
+        <br />
+        <br />
+        <Tag
+          href="http://example.com"
+          overrides={{stylePreset: 'customOutlineWidth'}}
+        >
+          Custom Width
+        </Tag>
+        <br />
+        <br />
+        <Tag
+          href="http://example.com"
+          overrides={{stylePreset: 'customOutlineOffset'}}
+        >
+          Custom Offset
+        </Tag>
+      </ThemeProvider>
+    </Container>
+  </>
+);
+StoryTagWithOutlineOverride.storyName = 'tag with outline overrides';
diff --git a/src/text-field/__tests__/text-field.stories.tsx b/src/text-field/__tests__/text-field.stories.tsx
index d0a3065a92..38be7f125a 100644
--- a/src/text-field/__tests__/text-field.stories.tsx
+++ b/src/text-field/__tests__/text-field.stories.tsx
@@ -48,6 +48,79 @@ const myCustomTheme = createTheme({
           color: '#0ed200',
         },
       },
+      customOutlineColor: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveInput020}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkBase}}',
+          textOverflow: 'ellipsis',
+          placeholderColor: '{{colors.inkSubtle}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: '{{outlines.outlineStyleDefault}}',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+        },
+      },
+      customOutlineStyle: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveInput020}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkBase}}',
+          textOverflow: 'ellipsis',
+          placeholderColor: '{{colors.inkSubtle}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '{{outlines.outlineWidthDefault}}',
+        },
+      },
+      customOutlineWidth: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveInput020}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkBase}}',
+          textOverflow: 'ellipsis',
+          placeholderColor: '{{colors.inkSubtle}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+        },
+      },
+      customOutlineOffset: {
+        base: {
+          backgroundColor: '{{colors.transparent}}',
+          borderStyle: 'solid',
+          borderColor: '{{colors.interactiveInput020}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+          borderRadius: '{{borders.borderRadiusDefault}}',
+          color: '{{colors.inkBase}}',
+          textOverflow: 'ellipsis',
+          placeholderColor: '{{colors.inkSubtle}}',
+          iconColor: '{{colors.inkBase}}',
+        },
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+          outlineOffset: '5px',
+        },
+      },
     },
   },
 });
@@ -445,3 +518,118 @@ export const TextFieldAddOn = () => {
     </>
   );
 };
+
+export const TextFieldOutlineOverrideExamples = () => (
+  <>
+    <StorybookHeading>Outline override</StorybookHeading>
+    <ThemeProvider theme={myCustomTheme}>
+      <Container>
+        <Stack
+          flow="horizontal-center"
+          spaceInline="space070"
+          spaceStack="space050"
+          wrap="wrap"
+        >
+          <Block>
+            <Block>
+              <Grid>
+                <Cell xs={12}>
+                  <StorybookSubHeading>Custom Color</StorybookSubHeading>
+                  <Label htmlFor="id-outline-1" size={'small' as TextFieldSize}>
+                    A Label
+                  </Label>
+                  <TextField
+                    aria-describedby="id-outline-1-at"
+                    id="id-outline-1"
+                    size={'small' as TextFieldSize}
+                    overrides={{
+                      stylePreset: 'customOutlineColor',
+                    }}
+                  />
+                  <AssistiveText
+                    id="id-outline-1-at"
+                    size={'small' as TextFieldSize}
+                  >
+                    Assistive Text Goes Here
+                  </AssistiveText>
+                </Cell>
+              </Grid>
+            </Block>
+            <Block>
+              <Grid>
+                <Cell xs={12}>
+                  <StorybookSubHeading>Custom Style</StorybookSubHeading>
+                  <Label htmlFor="id-outline-2" size={'small' as TextFieldSize}>
+                    A Label
+                  </Label>
+                  <TextField
+                    aria-describedby="id-2-at"
+                    id="id-outline-2"
+                    size={'small' as TextFieldSize}
+                    overrides={{
+                      stylePreset: 'customOutlineStyle',
+                    }}
+                  />
+                  <AssistiveText
+                    id="id-outline-2-at"
+                    size={'small' as TextFieldSize}
+                  >
+                    Assistive Text Goes Here
+                  </AssistiveText>
+                </Cell>
+              </Grid>
+            </Block>
+            <Block>
+              <Grid>
+                <Cell xs={12}>
+                  <StorybookSubHeading>Custom Width</StorybookSubHeading>
+                  <Label htmlFor="id-outline-3" size={'small' as TextFieldSize}>
+                    A Label
+                  </Label>
+                  <TextField
+                    aria-describedby="id-outline-3-at"
+                    id="id-outline-3"
+                    size={'small' as TextFieldSize}
+                    overrides={{
+                      stylePreset: 'customOutlineWidth',
+                    }}
+                  />
+                  <AssistiveText
+                    id="id-outline-3-at"
+                    size={'small' as TextFieldSize}
+                  >
+                    Assistive Text Goes Here
+                  </AssistiveText>
+                </Cell>
+              </Grid>
+            </Block>
+            <Block>
+              <Grid>
+                <Cell xs={12}>
+                  <StorybookSubHeading>Custom Offset</StorybookSubHeading>
+                  <Label htmlFor="id-outline-4" size={'small' as TextFieldSize}>
+                    A Label
+                  </Label>
+                  <TextField
+                    aria-describedby="id-outline-4-at"
+                    id="id-outline-4"
+                    size={'small' as TextFieldSize}
+                    overrides={{
+                      stylePreset: 'customOutlineOffset',
+                    }}
+                  />
+                  <AssistiveText
+                    id="id-outline-4-at"
+                    size={'small' as TextFieldSize}
+                  >
+                    Assistive Text Goes Here
+                  </AssistiveText>
+                </Cell>
+              </Grid>
+            </Block>
+          </Block>
+        </Stack>
+      </Container>
+    </ThemeProvider>
+  </>
+);