diff --git a/packages/react-components/react-menu/stories/src/Menu/MenuDefault.stories.tsx b/packages/react-components/react-menu/stories/src/Menu/MenuDefault.stories.tsx
index bb6837eade01a1..9d0b07dec86b9a 100644
--- a/packages/react-components/react-menu/stories/src/Menu/MenuDefault.stories.tsx
+++ b/packages/react-components/react-menu/stories/src/Menu/MenuDefault.stories.tsx
@@ -1,20 +1,67 @@
-import * as React from 'react';
+import React from "react";
+import {
+  makeStyles,
+  mergeClasses,
+  FluentProvider,
+  webLightTheme,
+  Slider,
+  Switch,
+  Checkbox,
+  Button,
+  shorthands,
+} from "@fluentui/react-components";
 
-import { Button, Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui/react-components';
+const useStyles = makeStyles({
+  hidden: {
+    ...shorthands.overflow("hidden"),
+  },
+  inlineFlex: {
+    display: "inline-flex",
+  },
+});
 
-export const Default = () => (
-  <Menu>
-    <MenuTrigger disableButtonEnhancement>
-      <Button>Toggle menu</Button>
-    </MenuTrigger>
+export const Default = () => {
+  const classes = useStyles();
 
-    <MenuPopover>
-      <MenuList>
-        <MenuItem>New </MenuItem>
-        <MenuItem>New Window</MenuItem>
-        <MenuItem disabled>Open File</MenuItem>
-        <MenuItem>Open Folder</MenuItem>
-      </MenuList>
-    </MenuPopover>
-  </Menu>
-);
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <div className={classes.hidden}>
+        <h2>Cut cases:</h2>
+        <Slider />
+        <br />
+        <div className={mergeClasses(classes.hidden, classes.inlineFlex)}>
+          <Slider />
+        </div>
+        <br />
+        <Slider vertical />
+        <br />
+        <Switch defaultChecked />
+        <br />
+        <Checkbox defaultChecked />
+
+        <hr />
+        <h2>Invisible cases:</h2>
+        <div className={mergeClasses(classes.hidden, classes.inlineFlex)}>
+          <Slider vertical />
+        </div>
+        <br />
+        <div className={mergeClasses(classes.hidden, classes.inlineFlex)}>
+          <Switch defaultChecked />
+        </div>
+        <br />
+        <div className={mergeClasses(classes.hidden, classes.inlineFlex)}>
+          <Checkbox defaultChecked />
+        </div>
+        <hr />
+        <h2>
+          Reference (not using <code>createFocusOutlineStyle</code> for border):
+        </h2>
+        <Button>Reference</Button>
+        <br />
+        <div className={mergeClasses(classes.hidden, classes.inlineFlex)}>
+          <Button>Reference</Button>
+        </div>
+      </div>
+    </FluentProvider>
+  );
+}
diff --git a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts
index 96c61bbda737c7..54a83e63a70ae2 100644
--- a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts
+++ b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts
@@ -34,10 +34,8 @@ export interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIn
  * @param position - The position of the focus outline
  * @returns CSS value for the position of the focus outline
  */
-function getOutlinePosition(
-  { outlineWidth, outlineOffset }: FocusOutlineStyleOptions,
-  position: 'top' | 'bottom' | 'left' | 'right',
-) {
+function getOutlinePosition(options: FocusOutlineStyleOptions, position: 'top' | 'bottom' | 'left' | 'right') {
+  const { outlineWidth, outlineOffset = '-2px' } = options;
   const offsetValue = (outlineOffset as FocusOutlineOffset)?.[position] || outlineOffset;
 
   if (!outlineOffset) {