diff --git a/CHANGELOG.md b/CHANGELOG.md
index a10dc60afa..c893cb457c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Add `box-sizing: border-box` to all elements, as well as before and after pseudo elements in Teams theme @mnajdova ([#1057](https://github.com/stardust-ui/react/pull/1057))
+
 ### Fixes
 - Fix overflowing focus outline for `Grid` items for Teams theme @Bugaa92 ([#1195](https://github.com/stardust-ui/react/pull/1195))
 - Fix routing for accessibility documentation @sophieH29 ([#1208](https://github.com/stardust-ui/react/pull/1208))
diff --git a/docs/src/prototypes/chatPane/composeMessage.tsx b/docs/src/prototypes/chatPane/composeMessage.tsx
index d40f874eda..d51c749c24 100644
--- a/docs/src/prototypes/chatPane/composeMessage.tsx
+++ b/docs/src/prototypes/chatPane/composeMessage.tsx
@@ -57,7 +57,6 @@ const getInputWrapperStyles = ({ attached }: ComposeMessageProps): React.CSSProp
   const borderWidth = '1px'
 
   return {
-    boxSizing: 'border-box',
     borderStyle: 'solid',
     borderWidth,
     borderRadius: `${borderTopRadius} ${borderTopRadius} ${borderBottomRadius} ${borderBottomRadius}`,
diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index 34ee4afae6..2aed7ceaa4 100644
--- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -61,7 +61,6 @@ const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
     alignItems: 'center',
     position: 'relative',
     width: '100%',
-    boxSizing: 'border-box',
     borderStyle: v.borderStyle,
     borderWidth: v.borderWidth,
     borderRadius: v.borderRadius,
diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
index 8ea6324bae..c5f224934f 100644
--- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
+++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
@@ -24,12 +24,6 @@ const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVari
 
     outline: 0,
 
-    // todo: remove when #1057 to make box-sizing global is checked in
-    boxSizing: 'border-box',
-    '& *': {
-      boxSizing: `border-box`,
-    },
-
     ...(p.isFromKeyboard && {
       ':focus': {
         borderColor: v.focusInnerBorderColor,
diff --git a/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts b/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts
index d6a849d6c2..d64e1c8ba7 100644
--- a/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts
+++ b/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts
@@ -17,7 +17,6 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
     const sizeInRem = pxToRem(sizeToPxValue[size])
 
     return {
-      boxSizing: 'border-box',
       position: 'relative',
       backgroundColor: 'inherit',
       display: 'inline-block',
@@ -27,7 +26,6 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
     }
   },
   image: ({ variables: v }): ICSSInJSStyle => ({
-    boxSizing: 'border-box',
     borderColor: v.avatarBorderColor,
     borderStyle: 'solid',
     borderWidth: `${v.avatarBorderWidth}px`,
@@ -40,7 +38,6 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
   label: ({ props: { size } }): ICSSInJSStyle => {
     const sizeInRem = pxToRem(sizeToPxValue[size])
     return {
-      boxSizing: 'border-box',
       display: 'inline-block',
       width: sizeInRem,
       height: sizeInRem,
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 468d41015b..f1dea31aab 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -64,7 +64,6 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
     display: 'flex',
     flexWrap: 'wrap',
     position: 'relative',
-    boxSizing: 'border-box',
     borderStyle: 'solid',
     borderColor: 'transparent',
     outline: 0,
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
index dfab693f62..920ead882e 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
@@ -30,12 +30,12 @@ export default (siteVars): DropdownVariables => ({
   borderWidth: `0 0 ${pxToRem(2)} 0`,
   color: siteVars.bodyColor,
   comboboxPaddingButton: `0 ${_12px_asRem}`,
-  comboboxFlexBasis: '50px',
+  comboboxFlexBasis: pxToRem(50),
   listBackgroundColor: siteVars.colors.white,
   listBorderRadius: _3px_asRem,
   listPadding: `${pxToRem(8)} 0`,
   listBoxShadow: `0 .2rem .6rem 0 ${siteVars.gray06}`,
-  listMaxHeight: '20rem',
+  listMaxHeight: pxToRem(296),
   listItemBackgroundColor: siteVars.colors.white,
   listItemBackgroundColorActive: siteVars.colors.primary[500],
   listItemColorActive: siteVars.colors.white,
diff --git a/packages/react/src/themes/teams/components/Embed/embedStyles.ts b/packages/react/src/themes/teams/components/Embed/embedStyles.ts
index 7da5165e7f..cb6668fb52 100644
--- a/packages/react/src/themes/teams/components/Embed/embedStyles.ts
+++ b/packages/react/src/themes/teams/components/Embed/embedStyles.ts
@@ -6,7 +6,6 @@ import { EmbedVariables } from './embedVariables'
 export default {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
     return {
-      boxSizing: 'border-box',
       display: 'inline-block',
       verticalAlign: 'middle',
       position: 'relative',
diff --git a/packages/react/src/themes/teams/components/Input/inputStyles.ts b/packages/react/src/themes/teams/components/Input/inputStyles.ts
index 9b9a2d625c..b1eb7adc90 100644
--- a/packages/react/src/themes/teams/components/Input/inputStyles.ts
+++ b/packages/react/src/themes/teams/components/Input/inputStyles.ts
@@ -14,7 +14,6 @@ const inputStyles: ComponentSlotStylesInput<InputProps, InputVariables> = {
 
   input: ({ props: p, variables: v }): ICSSInJSStyle => ({
     outline: 0,
-    boxSizing: 'border-box',
     borderStyle: 'solid',
     borderColor: 'transparent',
     borderWidth: v.borderWidth,
diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts
index 3435e41220..d592b4c2b4 100644
--- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts
+++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts
@@ -24,9 +24,6 @@ const radioStyles: ComponentSlotStylesInput<
   RadioGroupItemVariables
 > = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    // can remove this after global style for border-box goes in
-    boxSizing: 'border-box',
-
     alignItems: 'center',
     borderStyle: 'solid',
     borderWidth: `${pxToRem(1)}`,
@@ -69,10 +66,6 @@ const radioStyles: ComponentSlotStylesInput<
     // overrides from icon styles
     backgroundColor: 'transparent',
     boxShadow: 'none',
-
-    // can remove this after global style for border-box goes in
-    boxSizing: 'border-box',
-
     borderStyle: 'solid',
     borderWidth: `${pxToRem(1)}`,
     borderColor: 'currentColor',
diff --git a/packages/react/src/themes/teams/components/Status/statusStyles.ts b/packages/react/src/themes/teams/components/Status/statusStyles.ts
index 422185c72a..87e05838ef 100644
--- a/packages/react/src/themes/teams/components/Status/statusStyles.ts
+++ b/packages/react/src/themes/teams/components/Status/statusStyles.ts
@@ -58,7 +58,6 @@ export const getSizeStyles = (sizeInPx: number, variables: StatusVariables) => {
 const statusStyles: ComponentSlotStylesInput<StatusProps, StatusVariables> = {
   root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
     return {
-      boxSizing: 'border-box',
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
diff --git a/packages/react/src/themes/teams/components/Video/videoStyles.ts b/packages/react/src/themes/teams/components/Video/videoStyles.ts
index 5ee2abbdba..e5e0075e59 100644
--- a/packages/react/src/themes/teams/components/Video/videoStyles.ts
+++ b/packages/react/src/themes/teams/components/Video/videoStyles.ts
@@ -4,7 +4,6 @@ import { VideoVariables } from './videoVariables'
 
 export default {
   root: ({ variables: v }): ICSSInJSStyle => ({
-    boxSizing: 'border-box',
     display: 'inline-block',
     verticalAlign: 'middle',
     width: v.width,
diff --git a/packages/react/src/themes/teams/staticStyles/globalStyles.ts b/packages/react/src/themes/teams/staticStyles/globalStyles.ts
index c43a133441..7f71bb98ed 100644
--- a/packages/react/src/themes/teams/staticStyles/globalStyles.ts
+++ b/packages/react/src/themes/teams/staticStyles/globalStyles.ts
@@ -8,6 +8,15 @@ const globalStyles: StaticStyleFunction = siteVars => ({
     fontSize: siteVars.bodyFontSize,
     lineHeight: siteVars.bodyLineHeight,
   },
+  '*': {
+    boxSizing: 'border-box',
+  },
+  '*:before': {
+    boxSizing: 'border-box',
+  },
+  '*:after': {
+    boxSizing: 'border-box',
+  },
 })
 
 export default globalStyles