diff --git a/change/@fluentui-react-switch-96098242-67b8-4fd3-84a1-0852fe1ce386.json b/change/@fluentui-react-switch-96098242-67b8-4fd3-84a1-0852fe1ce386.json
new file mode 100644
index 0000000000000..782739479b6bb
--- /dev/null
+++ b/change/@fluentui-react-switch-96098242-67b8-4fd3-84a1-0852fe1ce386.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-switch",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-switch/src/Switch.stories.tsx b/packages/react-switch/src/Switch.stories.tsx
index ef3005e1a2e67..ab1f7b79c5656 100644
--- a/packages/react-switch/src/Switch.stories.tsx
+++ b/packages/react-switch/src/Switch.stories.tsx
@@ -1,157 +1,15 @@
+import { shorthands, makeStyles } from '@fluentui/react-make-styles';
+import { Label } from '@fluentui/react-label';
+import { Meta } from '@storybook/react';
 import * as React from 'react';
-import { makeStyles } from '@fluentui/react-make-styles';
-
-import { teamsLightTheme } from '@fluentui/react-theme';
 
-import { FluentProvider } from '@fluentui/react-provider';
 import { Switch, SwitchProps } from './components/Switch/index';
 
-import { Label } from '@fluentui/react-label';
-import { Meta } from '@storybook/react';
-
 const useStyles = makeStyles({
   root: {
     display: 'flex',
     flexDirection: 'column',
-    gap: '10px',
-  },
-});
-
-const useIosStyles = makeStyles({
-  root: {
-    width: '50px',
-    height: '30px',
-
-    ':hover .fui-Switch-thumb': {
-      ':before': {
-        background: 'white',
-      },
-    },
-
-    ':active .fui-Switch-thumb': {
-      ':before': {
-        background: 'white',
-      },
-    },
-
-    ':hover .fui-Switch-track': {
-      // Unchecked
-      ':before': {
-        borderColor: 'none',
-      },
-
-      // Checked
-      ':after': {
-        background: '#4cd964',
-      },
-    },
-
-    ':active .fui-Switch-track': {
-      ':before': {
-        borderColor: 'none',
-      },
-      ':after': {
-        background: '#4cd964',
-      },
-    },
-  },
-
-  thumbWrapper: {
-    left: 'calc(26px * .56)',
-    right: 'calc(26px * .56)',
-  },
-
-  thumb: {
-    width: '27px',
-    height: '27px',
-    boxShadow: `
-      0px 3px 8px 0px rgba(0, 0, 0, 0.15),
-      0px 3px 1px 0px rgba(0, 0, 0, 0.06)
-    `,
-    ':before': {
-      opacity: 1,
-      background: 'white',
-    },
-    ':after': {
-      opacity: 1,
-      background: 'white',
-    },
-  },
-
-  track: {
-    ':after': {
-      background: '#4cd964',
-      border: 'none',
-    },
-    ':before': {
-      background: 'white',
-      border: '1px solid #e0e0e0',
-    },
-  },
-});
-
-const useMaterialStyles = makeStyles({
-  root: {
-    width: '34px',
-    height: '14px',
-
-    ':hover .fui-Switch-thumb': {
-      ':before': {
-        background: 'white',
-      },
-      ':after': {
-        background: '#f50057',
-      },
-    },
-
-    ':hover .fui-Switch-track': {
-      ':before': {
-        background: '#9f9f9f',
-      },
-      ':after': {
-        background: '#fa80ab',
-        border: 'none',
-      },
-    },
-
-    ':active .fui-Switch-track': {
-      ':before': {
-        background: '#9f9f9f',
-      },
-      ':after': {
-        background: '#fa80ab',
-        border: 'none',
-      },
-    },
-  },
-
-  thumbWrapper: {
-    transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    left: 'calc(20px * .4)',
-    right: 'calc(20px * .4)',
-  },
-
-  thumb: {
-    width: '20px',
-    height: '20px',
-    boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
-    ':before': {
-      background: 'white',
-    },
-    ':after': {
-      background: '#f50057',
-    },
-  },
-
-  track: {
-    ':before': {
-      background: '#9f9f9f',
-      border: 'none',
-    },
-    ':after': {
-      background: '#fa80ab',
-      border: 'none',
-    },
+    ...shorthands.gap('10px'),
   },
 });
 
@@ -177,37 +35,6 @@ export const BasicSwitchExample = (props: SwitchProps) => {
   );
 };
 
-export const CustomSwitchExample = (props: SwitchProps) => {
-  const styles = useStyles();
-  const iosStyles = useIosStyles();
-  const materialStyles = useMaterialStyles();
-
-  return (
-    <div className={styles.root}>
-      <Label>Teams Example</Label>
-      <FluentProvider theme={teamsLightTheme}>
-        <Switch defaultChecked={true} />
-      </FluentProvider>
-      <Label>iOS Example</Label>
-      <Switch
-        defaultChecked={true}
-        className={iosStyles.root}
-        track={{ className: iosStyles.track }}
-        thumbWrapper={{ className: iosStyles.thumbWrapper }}
-        thumb={{ className: iosStyles.thumb }}
-      />
-      <Label>Material UI Example</Label>
-      <Switch
-        defaultChecked={true}
-        className={materialStyles.root}
-        track={{ className: materialStyles.track }}
-        thumbWrapper={{ className: materialStyles.thumbWrapper }}
-        thumb={{ className: materialStyles.thumb }}
-      />
-    </div>
-  );
-};
-
 export default {
   title: 'Components/Switch',
   component: Switch,
diff --git a/packages/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
index bb2ac1ab2442e..19e645e6214ba 100644
--- a/packages/react-switch/src/components/Switch/useSwitchStyles.ts
+++ b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import type { SwitchState } from './Switch.types';
 
@@ -29,7 +29,7 @@ const useRootStyles = makeStyles({
   unchecked: theme => ({
     [`:hover .${thumbClassName}`]: {
       ':before': {
-        background: theme.colorNeutralStrokeAccessibleHover,
+        backgroundColor: theme.colorNeutralStrokeAccessibleHover,
       },
     },
 
@@ -43,13 +43,13 @@ const useRootStyles = makeStyles({
   checked: theme => ({
     [`:hover .${trackClassName}`]: {
       ':after': {
-        background: theme.colorBrandBackgroundHover,
+        backgroundColor: theme.colorBrandBackgroundHover,
       },
     },
 
     [`:active .${trackClassName}`]: {
       ':after': {
-        background: theme.colorBrandBackgroundPressed,
+        backgroundColor: theme.colorBrandBackgroundPressed,
       },
     },
   }),
@@ -76,7 +76,9 @@ const useTrackStyles = makeStyles({
     position: 'absolute',
     width: '100%',
     height: '100%',
-    transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',
+    transitionProperty: 'backgroundColor',
+    transitionDuration: '0.1s',
+    transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
     touchAction: 'none',
     pointerEvents: 'none',
 
@@ -87,7 +89,7 @@ const useTrackStyles = makeStyles({
       bottom: '0px',
       right: '0px',
       boxSizing: 'border-box',
-      borderRadius: '999px',
+      ...shorthands.borderRadius('999px'),
       content: "''",
       opacity: 'var(--switch-unchecked-opacity)',
     },
@@ -99,7 +101,7 @@ const useTrackStyles = makeStyles({
       bottom: '0px',
       right: '0px',
       boxSizing: 'border-box',
-      borderRadius: '999px',
+      ...shorthands.borderRadius('999px'),
       content: "''",
       opacity: 'var(--switch-checked-opacity)',
     },
@@ -107,28 +109,28 @@ const useTrackStyles = makeStyles({
 
   unchecked: theme => ({
     ':before': {
-      border: `1px solid ${theme.colorNeutralStrokeAccessible}`,
-      background: 'none',
+      ...shorthands.border('1px', 'solid', theme.colorNeutralStrokeAccessible),
+      backgroundColor: 'transparent',
     },
   }),
 
   checked: theme => ({
     ':after': {
-      background: theme.colorBrandBackground,
-      border: 'none',
+      backgroundColor: theme.colorBrandBackground,
+      ...shorthands.borderStyle('none'),
     },
   }),
 
   disabledUnchecked: theme => ({
     ':before': {
-      border: `1px solid ${theme.colorNeutralStrokeDisabled}`,
+      ...shorthands.border('1px', 'solid', theme.colorNeutralStrokeDisabled),
     },
   }),
 
   disabledChecked: theme => ({
     ':after': {
-      border: `1px solid ${theme.colorTransparentStrokeDisabled}`,
-      background: theme.colorNeutralBackgroundDisabled,
+      ...shorthands.border('1px', 'solid', theme.colorTransparentStrokeDisabled),
+      backgroundColor: theme.colorNeutralBackgroundDisabled,
     },
   }),
 });
@@ -157,10 +159,12 @@ const useThumbStyles = makeStyles({
     width: 'var(--switch-thumb-size)',
     height: 'var(--switch-thumb-size)',
     boxSizing: 'border-box',
-    borderRadius: theme.borderRadiusCircular,
+    ...shorthands.borderRadius(theme.borderRadiusCircular),
     top: '50%',
     transform: 'translate(-50%, -50%)',
-    transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',
+    transitionProperty: 'backgroundColor',
+    transitionDuration: '0.1s',
+    transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
     touchAction: 'none',
     pointerEvents: 'none',
 
@@ -170,7 +174,7 @@ const useThumbStyles = makeStyles({
       left: '0px',
       bottom: '0px',
       right: '0px',
-      borderRadius: theme.borderRadiusCircular,
+      ...shorthands.borderRadius(theme.borderRadiusCircular),
       content: "''",
       opacity: 'var(--switch-unchecked-opacity)',
     },
@@ -181,7 +185,7 @@ const useThumbStyles = makeStyles({
       left: '0px',
       bottom: '0px',
       right: '0px',
-      borderRadius: theme.borderRadiusCircular,
+      ...shorthands.borderRadius(theme.borderRadiusCircular),
       content: "''",
       opacity: 'var(--switch-checked-opacity)',
     },
@@ -189,26 +193,26 @@ const useThumbStyles = makeStyles({
 
   unchecked: theme => ({
     ':before': {
-      background: theme.colorNeutralStrokeAccessible,
+      backgroundColor: theme.colorNeutralStrokeAccessible,
     },
   }),
 
   checked: theme => ({
     ':after': {
-      background: theme.colorNeutralForegroundOnBrand,
+      backgroundColor: theme.colorNeutralForegroundOnBrand,
     },
   }),
 
   disabledUnchecked: theme => ({
     ':before': {
-      border: `1px solid ${theme.colorNeutralForegroundDisabled}`,
-      background: theme.colorNeutralBackground1,
+      ...shorthands.border('1px', 'solid', theme.colorNeutralForegroundDisabled),
+      backgroundColor: theme.colorNeutralBackground1,
     },
   }),
 
   disabledChecked: theme => ({
     ':after': {
-      background: theme.colorNeutralForegroundDisabled,
+      backgroundColor: theme.colorNeutralForegroundDisabled,
     },
   }),
 });
@@ -231,8 +235,8 @@ const useInputStyle = makeStyles({
   input: {
     opacity: 0,
     position: 'absolute',
-    padding: 0,
-    margin: 0,
+    ...shorthands.padding(0),
+    ...shorthands.margin(0),
     width: '100%',
     height: '100%',
     touchAction: 'none',