diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b952c6109..8abfd8c771 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING CHANGES
 - Remove convoluted conditions from component's element type calculations @kuzhelov ([#1396](https://github.com/stardust-ui/react/pull/1396))
+- Replace `Dropdown` variables: `borderRadius` with `containerBorderRadius`, `openBorderRadius` with `openAboveContainerBorderRadius` and `openBelowContainerBorderRadius`, `listBorderRadius` with `aboveListBorderRadius` and `belowListBorderRadius` @Bugaa92 ([#1312](https://github.com/stardust-ui/react/pull/1312))
 
 ### Fixes
 - ESC key pressed on a trigger element should propagate event if `Popup` is closed @sophieH29 ([#1373](https://github.com/stardust-ui/react/pull/1373))
@@ -32,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Export `message-seen`, `presence-available`, `presence-stroke`, `open-outside` and `eye-friendlier`  icons to Teams theme @joheredi ([#1390](https://github.com/stardust-ui/react/pull/1390))
 - Add 'lightning' icon @notandrew ([#1385](https://github.com/stardust-ui/react/pull/1385))
 - Add automatic positioning inside viewport for `Menu` with submenus @Bugaa92 ([#1384](https://github.com/stardust-ui/react/pull/1384))
+- Add `align`, `position`, `offset` props for `Dropdown` component @Bugaa92 ([#1312](https://github.com/stardust-ui/react/pull/1312))
 
 ### Documentation
 - Accessibility: improve introduction section @jurokapsiar ([#1368](https://github.com/stardust-ui/react/pull/1368))
diff --git a/docs/src/examples/components/Dropdown/Variations/DropdownExampleOffset.shorthand.tsx b/docs/src/examples/components/Dropdown/Variations/DropdownExampleOffset.shorthand.tsx
new file mode 100644
index 0000000000..1ad84e8708
--- /dev/null
+++ b/docs/src/examples/components/Dropdown/Variations/DropdownExampleOffset.shorthand.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { Grid, Dropdown } from '@stardust-ui/react'
+
+const inputItems = ['Bruce Wayne', 'Natasha Romanoff', 'Steven Strange', 'Alfred Pennyworth']
+
+const DropdownExamplePosition = () => (
+  <Grid columns="1" variables={{ padding: '30px' }} styles={{ justifyItems: 'center' }}>
+    <Dropdown items={inputItems} placeholder="Select your hero" offset="-50%p" />
+  </Grid>
+)
+
+export default DropdownExamplePosition
diff --git a/docs/src/examples/components/Dropdown/Variations/DropdownExamplePosition.shorthand.tsx b/docs/src/examples/components/Dropdown/Variations/DropdownExamplePosition.shorthand.tsx
new file mode 100644
index 0000000000..22971246ec
--- /dev/null
+++ b/docs/src/examples/components/Dropdown/Variations/DropdownExamplePosition.shorthand.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Dropdown, Grid, Alignment, Position } from '@stardust-ui/react'
+import { useSelectKnob, useBooleanKnob } from '@stardust-ui/docs-components'
+
+const inputItems = ['Bruce Wayne', 'Natasha Romanoff', 'Steven Strange']
+
+const DropdownExamplePosition = () => {
+  const [open] = useBooleanKnob({ name: 'open', initialValue: true })
+
+  const [positionAndAlign] = useSelectKnob({
+    name: 'position-align',
+    initialValue: 'below',
+    values: positionAndAlignValues,
+  })
+
+  const [position, align] = _.split(positionAndAlign, '-') as [Position, Alignment]
+
+  return (
+    <Grid columns="1" variables={{ padding: '140px 0' }} styles={{ justifyItems: 'center' }}>
+      <Dropdown
+        open={open}
+        items={inputItems}
+        placeholder={`Opens ${position} trigger${align ? ` aligned to ${align}` : ''}.`}
+        align={align}
+        position={position}
+      />
+    </Grid>
+  )
+}
+
+export default DropdownExamplePosition
+
+const positionAndAlignValues = [
+  'above',
+  'below',
+  'before-top',
+  'before-bottom',
+  'after-top',
+  'after-bottom',
+]
diff --git a/docs/src/examples/components/Dropdown/Variations/index.tsx b/docs/src/examples/components/Dropdown/Variations/index.tsx
index f9978ec1b5..52a97965ec 100644
--- a/docs/src/examples/components/Dropdown/Variations/index.tsx
+++ b/docs/src/examples/components/Dropdown/Variations/index.tsx
@@ -19,6 +19,16 @@ const Variations = () => (
       description="A multiple search dropdown that uses French to provide information and accessibility."
       examplePath="components/Dropdown/Variations/DropdownExampleSearchMultipleFrenchLanguage"
     />
+    <ComponentExample
+      title="Alignment and Position"
+      description="A dropdown can be positioned around its trigger and aligned relative to the trigger's margins. Click on a button to open a dropdown on a specific position and alignment."
+      examplePath="components/Dropdown/Variations/DropdownExamplePosition"
+    />
+    <ComponentExample
+      title="Offset"
+      description="Dropdown position could be further customized by providing offset value. Note that percentage values of both trigger and dropdown elements' lengths are supported."
+      examplePath="components/Dropdown/Variations/DropdownExampleOffset"
+    />
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
index 29c10911e8..acee076f50 100644
--- a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
@@ -1,54 +1,76 @@
 import * as React from 'react'
-import { Button, Grid, Popup } from '@stardust-ui/react'
+import * as _ from 'lodash'
+import { Button, Grid, Popup, Alignment, Position } from '@stardust-ui/react'
+import { useBooleanKnob, useSelectKnob } from '@stardust-ui/docs-components'
 
-const PopupWithButton = props => {
-  const { position, align, icon, padding } = props
+const PopupExamplePosition = () => {
+  const [open] = useBooleanKnob({ name: 'open-s', initialValue: true })
+
+  const [positionAndAlign] = useSelectKnob({
+    name: 'position-align-s',
+    initialValue: 'above-start',
+    values: positionAndAlignValues,
+  })
+
+  const [position, align] = _.split(positionAndAlign, '-') as [Position, Alignment]
+  const buttonStyles = { padding: paddings[positionAndAlign], height: '38px', minWidth: '64px' }
 
   return (
-    <Popup
-      align={align}
-      position={position}
-      trigger={<Button icon={icon} styles={{ padding, height: '38px', minWidth: '64px' }} />}
-      content={{
-        content: (
-          <p>
-            The popup is rendered {position} the trigger
-            <br />
-            aligned to the {align}.
-          </p>
-        ),
-      }}
-    />
+    <Grid columns="1" variables={{ padding: '100px 0' }} styles={{ justifyItems: 'center' }}>
+      <Popup
+        open={open || undefined}
+        align={align}
+        position={position}
+        trigger={<Button icon={icons[position]} styles={buttonStyles} />}
+        content={{
+          content: (
+            <p>
+              The popup is rendered {position} the trigger
+              <br />
+              aligned to the {align}.
+            </p>
+          ),
+        }}
+      />
+    </Grid>
   )
 }
 
-const triggers = [
-  { position: 'above', align: 'start', icon: 'arrow circle up', padding: '5px 42px 18px 5px' },
-  { position: 'above', align: 'center', icon: 'arrow circle up', padding: '5px 5px 18px 5px' },
-  { position: 'above', align: 'end', icon: 'arrow circle up', padding: '5px 5px 18px 42px' },
-  { position: 'below', align: 'start', icon: 'arrow circle down', padding: '18px 42px 5px 5px' },
-  { position: 'below', align: 'center', icon: 'arrow circle down', padding: '18px 5px 5px 5px' },
-  { position: 'below', align: 'end', icon: 'arrow circle down', padding: '18px 5px 5px 42px' },
-  { position: 'before', align: 'top', icon: 'arrow circle left', padding: '5px 42px 18px 5px' },
-  { position: 'before', align: 'center', icon: 'arrow circle left', padding: '5px 42px 5px 5px' },
-  { position: 'before', align: 'bottom', icon: 'arrow circle left', padding: '18px 42px 5px 5px' },
-  { position: 'after', align: 'top', icon: 'arrow circle right', padding: '5px 5px 18px 42px' },
-  { position: 'after', align: 'center', icon: 'arrow circle right', padding: '5px 5px 5px 42px' },
-  { position: 'after', align: 'bottom', icon: 'arrow circle right', padding: '18px 5px 5px 42px' },
+export default PopupExamplePosition
+
+const positionAndAlignValues = [
+  'above-start',
+  'above-center',
+  'above-end',
+  'below-start',
+  'below-center',
+  'below-end',
+  'before-top',
+  'before-center',
+  'before-bottom',
+  'after-top',
+  'after-center',
+  'after-bottom',
 ]
 
-const PopupExamplePosition = () => (
-  <Grid columns="repeat(3, 30px)" variables={{ padding: '30px', gridGap: '80px' }}>
-    {triggers.map(({ position, align, icon, padding }) => (
-      <PopupWithButton
-        position={position}
-        align={align}
-        icon={icon}
-        padding={padding}
-        key={`${position}-${align}`}
-      />
-    ))}
-  </Grid>
-)
+const icons: Record<Position, string> = {
+  above: 'arrow circle up',
+  below: 'arrow circle down',
+  before: 'arrow circle left',
+  after: 'arrow circle right',
+}
 
-export default PopupExamplePosition
+const paddings: Record<string, React.CSSProperties['padding']> = {
+  'above-start': '5px 42px 18px 5px',
+  'above-center': '5px 5px 18px 5px',
+  'above-end': '5px 5px 18px 42px',
+  'below-start': '18px 42px 5px 5px',
+  'below-center': '18px 5px 5px 5px',
+  'below-end': '18px 5px 5px 42px',
+  'before-top': '5px 42px 18px 5px',
+  'before-center': '5px 42px 5px 5px',
+  'before-bottom': '18px 42px 5px 5px',
+  'after-top': '5px 5px 18px 42px',
+  'after-center': '5px 5px 5px 42px',
+  'after-bottom': '18px 5px 5px 42px',
+}
diff --git a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
index bbce0f5ee8..fb6f7d86f6 100644
--- a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
@@ -1,57 +1,77 @@
 import * as React from 'react'
-import { Button, Grid, Popup } from '@stardust-ui/react'
+import * as _ from 'lodash'
+import { Button, Grid, Popup, Alignment, Position } from '@stardust-ui/react'
+import { useBooleanKnob, useSelectKnob } from '@stardust-ui/docs-components'
 
-const PopupArrowExample = props => {
-  const { position, align, icon, padding } = props
+const PopupExamplePosition = () => {
+  const [open] = useBooleanKnob({ name: 'open-c', initialValue: true })
 
-  const buttonStyles = { padding, height: '38px', minWidth: '64px' }
+  const [positionAndAlign] = useSelectKnob({
+    name: 'position-align-c',
+    initialValue: 'above-start',
+    values: positionAndAlignValues,
+  })
+
+  const [position, align] = _.split(positionAndAlign, '-') as [Position, Alignment]
+  const buttonStyles = { padding: paddings[positionAndAlign], height: '38px', minWidth: '64px' }
 
   return (
-    <Popup
-      align={align}
-      position={position}
-      content={{
-        content: (
-          <p>
-            The popup is rendered {position} the trigger
-            <br />
-            aligned to the {align}.
-          </p>
-        ),
-      }}
-    >
-      <Button icon={icon} styles={buttonStyles} />
-    </Popup>
+    <Grid columns="1" variables={{ padding: '100px 0' }} styles={{ justifyItems: 'center' }}>
+      <Popup
+        open={open || undefined}
+        align={align}
+        position={position}
+        content={{
+          content: (
+            <p>
+              The popup is rendered {position} the trigger
+              <br />
+              aligned to the {align}.
+            </p>
+          ),
+        }}
+      >
+        <Button icon={icons[position]} styles={buttonStyles} />
+      </Popup>
+    </Grid>
   )
 }
 
-const triggers = [
-  { position: 'above', align: 'start', icon: 'arrow circle up', padding: '5px 42px 18px 5px' },
-  { position: 'above', align: 'center', icon: 'arrow circle up', padding: '5px 5px 18px 5px' },
-  { position: 'above', align: 'end', icon: 'arrow circle up', padding: '5px 5px 18px 42px' },
-  { position: 'below', align: 'start', icon: 'arrow circle down', padding: '18px 42px 5px 5px' },
-  { position: 'below', align: 'center', icon: 'arrow circle down', padding: '18px 5px 5px 5px' },
-  { position: 'below', align: 'end', icon: 'arrow circle down', padding: '18px 5px 5px 42px' },
-  { position: 'before', align: 'top', icon: 'arrow circle left', padding: '5px 42px 18px 5px' },
-  { position: 'before', align: 'center', icon: 'arrow circle left', padding: '5px 42px 5px 5px' },
-  { position: 'before', align: 'bottom', icon: 'arrow circle left', padding: '18px 42px 5px 5px' },
-  { position: 'after', align: 'top', icon: 'arrow circle right', padding: '5px 5px 18px 42px' },
-  { position: 'after', align: 'center', icon: 'arrow circle right', padding: '5px 5px 5px 42px' },
-  { position: 'after', align: 'bottom', icon: 'arrow circle right', padding: '18px 5px 5px 42px' },
+export default PopupExamplePosition
+
+const positionAndAlignValues = [
+  'above-start',
+  'above-center',
+  'above-end',
+  'below-start',
+  'below-center',
+  'below-end',
+  'before-top',
+  'before-center',
+  'before-bottom',
+  'after-top',
+  'after-center',
+  'after-bottom',
 ]
 
-const PopupExamplePosition = () => (
-  <Grid columns="repeat(3, 30px)" variables={{ padding: '30px', gridGap: '80px' }}>
-    {triggers.map(({ position, align, icon, padding }) => (
-      <PopupArrowExample
-        position={position}
-        align={align}
-        icon={icon}
-        padding={padding}
-        key={`${position}-${align}`}
-      />
-    ))}
-  </Grid>
-)
+const icons: Record<Position, string> = {
+  above: 'arrow circle up',
+  below: 'arrow circle down',
+  before: 'arrow circle left',
+  after: 'arrow circle right',
+}
 
-export default PopupExamplePosition
+const paddings: Record<string, React.CSSProperties['padding']> = {
+  'above-start': '5px 42px 18px 5px',
+  'above-center': '5px 5px 18px 5px',
+  'above-end': '5px 5px 18px 42px',
+  'below-start': '18px 42px 5px 5px',
+  'below-center': '18px 5px 5px 5px',
+  'below-end': '18px 5px 5px 42px',
+  'before-top': '5px 42px 18px 5px',
+  'before-center': '5px 42px 5px 5px',
+  'before-bottom': '18px 42px 5px 5px',
+  'after-top': '5px 5px 18px 42px',
+  'after-center': '5px 5px 5px 42px',
+  'after-bottom': '18px 5px 5px 42px',
+}
diff --git a/docs/src/prototypes/mentions/MentionsDropdown.tsx b/docs/src/prototypes/mentions/MentionsDropdown.tsx
index 3913c1ebb4..51eca93f86 100644
--- a/docs/src/prototypes/mentions/MentionsDropdown.tsx
+++ b/docs/src/prototypes/mentions/MentionsDropdown.tsx
@@ -22,9 +22,10 @@ const MentionsDropdown: React.FunctionComponent<MentionsContainerProps> = props
     <Provider.Consumer
       render={({ siteVariables: siteVars }) => (
         <Dropdown
-          defaultOpen={true}
+          defaultOpen
           inline
           search
+          position="above"
           items={items}
           renderItem={
             searchQuery
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index fa7cf63045..119bf9bdb8 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -41,6 +41,7 @@ import { screenReaderContainerStyles } from '../../lib/accessibility/Styles/acce
 import ListItem from '../List/ListItem'
 import Icon, { IconProps } from '../Icon/Icon'
 import Portal from '../Portal/Portal'
+import { ALIGNMENTS, POSITIONS, Popper, PositioningProps } from '../../lib/positioner'
 
 export interface DropdownSlotClassNames {
   clearIndicator: string
@@ -54,7 +55,9 @@ export interface DropdownSlotClassNames {
   triggerButton: string
 }
 
-export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownState> {
+export interface DropdownProps
+  extends UIComponentProps<DropdownProps, DropdownState>,
+    PositioningProps {
   /** The index of the currently active selected item, if dropdown has a multiple selection. */
   activeSelectedIndex?: number
 
@@ -221,6 +224,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
   private inputRef = React.createRef<HTMLInputElement>()
   private listRef = React.createRef<HTMLElement>()
   private selectedItemsRef = React.createRef<HTMLDivElement>()
+  private containerRef = React.createRef<HTMLDivElement>()
 
   static displayName = 'Dropdown'
 
@@ -238,6 +242,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
       content: false,
     }),
     activeSelectedIndex: PropTypes.number,
+    align: PropTypes.oneOf(ALIGNMENTS),
     clearable: PropTypes.bool,
     clearIndicator: customPropTypes.itemShorthand,
     defaultActiveSelectedIndex: PropTypes.number,
@@ -261,11 +266,13 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     moveFocusOnTab: PropTypes.bool,
     multiple: PropTypes.bool,
     noResultsMessage: customPropTypes.itemShorthand,
+    offset: PropTypes.string,
     onOpenChange: PropTypes.func,
     onSearchQueryChange: PropTypes.func,
     onSelectedChange: PropTypes.func,
     open: PropTypes.bool,
     placeholder: PropTypes.string,
+    position: PropTypes.oneOf(POSITIONS),
     renderItem: PropTypes.func,
     renderSelectedItem: PropTypes.func,
     search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
@@ -280,6 +287,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
   }
 
   static defaultProps = {
+    align: 'start',
     as: 'div',
     clearIndicator: 'stardust-close',
     itemToString: item => {
@@ -290,6 +298,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
       // targets DropdownItem shorthand objects
       return (item as any).header || String(item)
     },
+    position: 'below',
     toggleIndicator: {},
     triggerButton: {},
   }
@@ -425,6 +434,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
             return (
               <Ref innerRef={innerRef}>
                 <div
+                  ref={this.containerRef}
                   className={cx(Dropdown.slotClassNames.container, classes.container)}
                   onClick={search && !open ? this.handleContainerClick : undefined}
                 >
@@ -482,6 +492,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
                     getItemProps,
                     getInputProps,
                     value,
+                    rtl,
                   )}
                 </div>
               </Ref>
@@ -602,9 +613,13 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     getItemProps: (options: GetItemPropsOptions<ShorthandValue>) => any,
     getInputProps: (options?: GetInputPropsOptions) => any,
     value: ShorthandValue | ShorthandCollection,
+    rtl: boolean,
   ) {
-    const { search } = this.props
+    const { align, offset, position, search } = this.props
     const { open } = this.state
+    const items = open
+      ? this.renderItems(styles, variables, getItemProps, highlightedIndex, value)
+      : []
     const { innerRef, ...accessibilityMenuProps } = getMenuProps(
       { refKey: 'innerRef' },
       { suppressRefError: true },
@@ -634,18 +649,26 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
           handleRef(innerRef, listElement)
         }}
       >
-        <List
-          className={Dropdown.slotClassNames.itemsList}
-          {...accessibilityMenuProps}
-          styles={styles.list}
-          tabIndex={search ? undefined : -1} // needs to be focused when trigger button is activated.
-          aria-hidden={!open}
-          onFocus={this.handleTriggerButtonOrListFocus}
-          onBlur={this.handleListBlur}
-          items={
-            open ? this.renderItems(styles, variables, getItemProps, highlightedIndex, value) : []
-          }
-        />
+        <Popper
+          align={align}
+          position={position}
+          offset={offset}
+          rtl={rtl}
+          eventsEnabled={open}
+          targetRef={this.containerRef}
+          positioningDependencies={[items.length]}
+        >
+          <List
+            className={Dropdown.slotClassNames.itemsList}
+            {...accessibilityMenuProps}
+            styles={styles.list}
+            tabIndex={search ? undefined : -1} // needs to be focused when trigger button is activated.
+            aria-hidden={!open}
+            onFocus={this.handleTriggerButtonOrListFocus}
+            onBlur={this.handleListBlur}
+            items={items}
+          />
+        </Popper>
       </Ref>
     )
   }
diff --git a/packages/react/src/lib/positioner/Popper.tsx b/packages/react/src/lib/positioner/Popper.tsx
index 4ef2da4f5d..0cd54ec2f0 100644
--- a/packages/react/src/lib/positioner/Popper.tsx
+++ b/packages/react/src/lib/positioner/Popper.tsx
@@ -49,6 +49,8 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
       const popperHasScrollableParent = getScrollParent(contentRef.current) !== document.body
 
       const modifiers: PopperJS.Modifiers = _.merge(
+        { preventOverflow: { padding: 0 } },
+        { flip: { padding: 0 } },
         /**
          * When the popper box is placed in the context of a scrollable element, we need to set
          * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent' (default is 'viewport')
diff --git a/packages/react/src/lib/positioner/positioningHelper.ts b/packages/react/src/lib/positioner/positioningHelper.ts
index b128a7d7a3..c14a7e042a 100644
--- a/packages/react/src/lib/positioner/positioningHelper.ts
+++ b/packages/react/src/lib/positioner/positioningHelper.ts
@@ -12,14 +12,14 @@ enum PlacementParts {
   center = '',
 }
 
-const getPositionMap = (rtl: boolean): { [key in Position]: PlacementParts } => ({
+const getPositionMap = (rtl: boolean): Record<Position, PlacementParts> => ({
   above: PlacementParts.top,
   below: PlacementParts.bottom,
   before: rtl ? PlacementParts.right : PlacementParts.left,
   after: rtl ? PlacementParts.left : PlacementParts.right,
 })
 
-const getAlignmentMap = (rtl: boolean): { [key in Alignment]: PlacementParts } => ({
+const getAlignmentMap = (rtl: boolean): Record<Alignment, PlacementParts> => ({
   start: rtl ? PlacementParts.end : PlacementParts.start,
   end: rtl ? PlacementParts.start : PlacementParts.end,
   top: PlacementParts.start,
diff --git a/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownVariables.ts
index ae9af09c85..9738d0c45a 100644
--- a/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownVariables.ts
+++ b/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownVariables.ts
@@ -5,16 +5,20 @@ export interface DropdownVariablesHC extends DropdownVariables {
   borderColorHover: string
 }
 
+const _3px_asRem = pxToRem(3)
+
 export default (siteVars): Partial<DropdownVariablesHC> => ({
   backgroundColor: siteVars.colors.black,
   borderColor: siteVars.colors.white,
-  borderRadius: pxToRem(3),
+  containerBorderRadius: _3px_asRem,
+  openAboveContainerBorderRadius: `0 0 ${_3px_asRem} ${_3px_asRem}`,
   borderWidth: `1px`,
   backgroundColorHover: siteVars.colors.black,
   borderColorHover: siteVars.accessibleYellow,
   borderColorFocus: siteVars.accessibleCyan,
   color: siteVars.colors.white,
   selectedItemColor: siteVars.colors.white,
+  belowListBorderRadius: `0 0 ${_3px_asRem} ${_3px_asRem}`,
   listBackgroundColor: siteVars.colors.black,
   listBorderColor: siteVars.colors.white,
   listBoxShadow: undefined,
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 69108e0f5f..d4d29055b8 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -56,15 +56,9 @@ const getWidth = (p: DropdownPropsAndState, v: DropdownVariables): string => {
   return v.width
 }
 
-const getContainerBorderRadius = (p, v) => {
-  return p.open ? v.openBorderRadius : v.borderRadius
-}
-
 const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVariables> = {
   root: ({ props: p }): ICSSInJSStyle => ({
-    ...(p.inline && {
-      display: 'inline-flex',
-    }),
+    ...(p.inline && { display: 'inline-flex' }),
   }),
 
   clearIndicator: getIndicatorStyles,
@@ -78,9 +72,11 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
     outline: 0,
     width: getWidth(p, v),
     borderWidth: p.search ? `0 0 ${v.searchBorderBottomWidth} 0` : v.borderWidth,
-    borderRadius: getContainerBorderRadius(p, v),
     color: v.color,
     backgroundColor: v.backgroundColor,
+    borderRadius: v.containerBorderRadius,
+    ...(p.open && p.position === 'above' && { borderRadius: v.openAboveContainerBorderRadius }),
+    ...(p.open && p.position === 'below' && { borderRadius: v.openBelowContainerBorderRadius }),
     ':hover': {
       backgroundColor: v.backgroundColorHover,
       [`& .${Dropdown.slotClassNames.triggerButton}`]: {
@@ -117,7 +113,6 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
       margin: '0',
       justifyContent: 'left',
       padding: v.comboboxPaddingButton,
-      height: pxToRem(30),
       ...(p.multiple && { minWidth: 0, flex: 1 }),
       ...transparentColorStyleObj,
       ':focus': {
@@ -144,8 +139,6 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
 
   list: ({ props: p, variables: v }): ICSSInJSStyle => ({
     outline: 0,
-    position: 'absolute',
-    borderRadius: v.listBorderRadius,
     borderStyle: 'solid',
     borderWidth: p.open ? v.listBorderWidth : '0px',
     borderColor: v.listBorderColor,
@@ -153,9 +146,9 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
     maxHeight: v.listMaxHeight,
     overflowY: 'auto',
     width: getWidth(p, v),
-    left: p.search ? '0px' : `-${v.borderWidth}`,
-    top: `calc(100% + ${p.search ? v.searchBorderBottomWidth : '0px'})`, // leave room for container + its border
     background: v.listBackgroundColor,
+    ...(p.position === 'above' && { borderRadius: v.aboveListBorderRadius }),
+    ...(p.position === 'below' && { borderRadius: v.belowListBorderRadius }),
     ...(p.open && {
       boxShadow: v.listBoxShadow,
       padding: v.listPadding,
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
index b61fe1699f..7e76cc53b9 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
@@ -5,16 +5,18 @@ export interface DropdownVariables {
   backgroundColorHover: string
   borderColor: string
   borderColorFocus: string
-  borderRadius: string
-  openBorderRadius: string
   borderWidth: string
+  containerBorderRadius: string
+  openAboveContainerBorderRadius: string
+  openBelowContainerBorderRadius: string
   searchBorderBottomWidth: string
   color: string
   comboboxPaddingButton: string
   comboboxFlexBasis: string
+  aboveListBorderRadius: string
+  belowListBorderRadius: string
   listBackgroundColor: string
   listBorderColor: string
-  listBorderRadius: string
   listBorderWidth: string
   listPadding: string
   listBoxShadow: string
@@ -43,16 +45,18 @@ export default (siteVars): DropdownVariables => ({
   backgroundColorHover: siteVars.colors.grey[150],
   borderColor: 'transparent',
   borderColorFocus: siteVars.colors.brand[600],
-  borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
-  openBorderRadius: `${_3px_asRem} ${_3px_asRem} 0 0`,
   borderWidth: '0px',
+  containerBorderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
+  openAboveContainerBorderRadius: `0 0 ${_2px_asRem} ${_2px_asRem}`,
+  openBelowContainerBorderRadius: `${_3px_asRem} ${_3px_asRem} 0 0`,
   searchBorderBottomWidth: pxToRem(2),
   color: siteVars.bodyColor,
   selectedItemColor: siteVars.bodyColor,
   comboboxPaddingButton: `0 ${_12px_asRem}`,
   comboboxFlexBasis: pxToRem(50),
+  aboveListBorderRadius: `${_3px_asRem} ${_3px_asRem} 0 0`,
+  belowListBorderRadius: `0 0 ${_2px_asRem} ${_2px_asRem}`,
   listBackgroundColor: siteVars.colors.white,
-  listBorderRadius: `0 0 ${_3px_asRem} ${_3px_asRem}`,
   listBorderColor: 'transparent',
   listBorderWidth: '0px',
   listPadding: `${pxToRem(8)} 0`,