diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index be5c03b1a8c0e1..0b6d63414e304b 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -253,6 +253,23 @@ export function BorderPanel( props ) {
 	};
 
 	const hydratedBorder = getBorderObject( attributes, colors );
+	const popoversProps = {
+		linked: {
+			className: 'block-editor__border-box-control__popover',
+		},
+		top: {
+			className: 'block-editor__border-box-control__popover-top',
+		},
+		right: {
+			className: 'block-editor__border-box-control__popover-right',
+		},
+		bottom: {
+			className: 'block-editor__border-box-control__popover-bottom',
+		},
+		left: {
+			className: 'block-editor__border-box-control__popover-left',
+		},
+	};
 
 	return (
 		<InspectorControls __experimentalGroup="border">
@@ -269,17 +286,7 @@ export function BorderPanel( props ) {
 						colors={ colors }
 						enableAlpha={ true }
 						onChange={ onBorderChange }
-						popoverClassNames={ {
-							linked: 'block-editor__border-box-control__popover',
-							top:
-								'block-editor__border-box-control__popover-top',
-							right:
-								'block-editor__border-box-control__popover-right',
-							bottom:
-								'block-editor__border-box-control__popover-bottom',
-							left:
-								'block-editor__border-box-control__popover-left',
-						} }
+						popoversProps={ popoversProps }
 						showStyle={ isStyleSupported }
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c44134fdb096ec..0f0f23254e137b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## Enhancements
+
+-    Update `BorderControl` and `BorderBoxControl` to passthrough popover props to their dropdowns instead of classnames only. ([#40836](https://github.com/WordPress/gutenberg/pull/40836))
+
 ## 19.10.0 (2022-05-04)
 
 ### Internal
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
index f1e7e26c37f0fa..86b3be873bb099 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -25,7 +25,7 @@ const BorderBoxControlSplitControls = (
 		enableAlpha,
 		enableStyle,
 		onChange,
-		popoverClassNames,
+		popoversProps,
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
@@ -50,7 +50,7 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Top border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
-				popoverContentClassName={ popoverClassNames?.top }
+				popoverProps={ popoversProps?.top }
 				value={ value?.top }
 				{ ...sharedBorderControlProps }
 			/>
@@ -58,7 +58,7 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
-				popoverContentClassName={ popoverClassNames?.left }
+				popoverProps={ popoversProps?.left }
 				value={ value?.left }
 				{ ...sharedBorderControlProps }
 			/>
@@ -66,7 +66,7 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
-				popoverContentClassName={ popoverClassNames?.right }
+				popoverProps={ popoversProps?.right }
 				value={ value?.right }
 				{ ...sharedBorderControlProps }
 			/>
@@ -75,7 +75,7 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Bottom border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
-				popoverContentClassName={ popoverClassNames?.bottom }
+				popoverProps={ popoversProps?.bottom }
 				value={ value?.bottom }
 				{ ...sharedBorderControlProps }
 			/>
diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index 67a9426823f0f2..bf295c1082d9d8 100644
--- a/packages/components/src/border-box-control/border-box-control/README.md
+++ b/packages/components/src/border-box-control/border-box-control/README.md
@@ -122,19 +122,19 @@ _Note: The will be `undefined` if a user clears all borders._
 
 - Required: Yes
 
-### `popoverClassNames`: `Object`
+### `popoversProps`: `Object`
 
-An object defining CSS classnames for all the inner `BorderControl` popover
-content.
+An object defining the `popoverProps` for all the inner `BorderControl`
+dropdowns.
 
 Example:
 ```js
 {
-	linked: 'linked-border-popover-content',
-	top: 'top-border-popover-content',
-	right: 'right-border-popover-content',
-	bottom: 'bottom-border-popover-content',
-	left: 'left-border-popover-content',
+	linked: { className: 'linked-border-popover-content' },
+	top: { className: 'top-border-popover-content' },
+	right: { className: 'right-border-popover-content' },
+	bottom: { className: 'bottom-border-popover-content' },
+	left: { className: 'left-border-popover-content' },
 }
 ```
 
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index 976fdf90c798b1..4cc82c30ef14c9 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -51,7 +51,7 @@ const BorderBoxControl = (
 		linkedValue,
 		onLinkedChange,
 		onSplitChange,
-		popoverClassNames,
+		popoversProps,
 		splitValue,
 		toggleLinked,
 		__experimentalHasMultipleOrigins,
@@ -77,7 +77,7 @@ const BorderBoxControl = (
 						placeholder={
 							hasMixedBorders ? __( 'Mixed' ) : undefined
 						}
-						popoverContentClassName={ popoverClassNames?.linked }
+						popoverProps={ popoversProps?.linked }
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider={ true }
@@ -96,7 +96,7 @@ const BorderBoxControl = (
 						enableAlpha={ enableAlpha }
 						enableStyle={ enableStyle }
 						onChange={ onSplitChange }
-						popoverClassNames={ popoverClassNames }
+						popoversProps={ popoversProps }
 						value={ splitValue }
 						__experimentalHasMultipleOrigins={
 							__experimentalHasMultipleOrigins
diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts
index 2a87c708f506f1..c048b099c095ca 100644
--- a/packages/components/src/border-box-control/types.ts
+++ b/packages/components/src/border-box-control/types.ts
@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import type { Border, ColorProps, LabelProps } from '../border-control/types';
+import type {
+	Border,
+	ColorProps,
+	DropdownPopoverProps,
+	LabelProps,
+} from '../border-control/types';
 
 export type Borders = {
 	top?: Border;
@@ -14,12 +19,15 @@ export type AnyBorder = Border | Borders | undefined;
 export type BorderProp = keyof Border;
 export type BorderSide = keyof Borders;
 
-export type PopoverClassNames = {
-	linked?: string;
-	top?: string;
-	right?: string;
-	bottom?: string;
-	left?: string;
+/**
+ * Collection of `popoverProps` for each of the inner border controls.
+ */
+export type PopoversProps = {
+	linked?: DropdownPopoverProps;
+	top?: DropdownPopoverProps;
+	right?: DropdownPopoverProps;
+	bottom?: DropdownPopoverProps;
+	left?: DropdownPopoverProps;
 };
 
 export type BorderBoxControlProps = ColorProps &
@@ -35,10 +43,10 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		onChange: ( value: AnyBorder ) => void;
 		/**
-		 * An object defining CSS classnames for all the inner `BorderControl`
-		 * popover content.
+		 * An object defining the `popoverProps` for all the inner
+		 * `BorderControl` dropdowns.
 		 */
-		popoverClassNames?: PopoverClassNames;
+		popoversProps?: PopoversProps;
 		/**
 		 * An object representing the current border configuration.
 		 *
@@ -85,10 +93,10 @@ export type SplitControlsProps = ColorProps & {
 	 */
 	onChange: ( value: Border | undefined, side: BorderSide ) => void;
 	/**
-	 * An object defining CSS classnames for the split side `BorderControl`s'
-	 * popover content.
+	 * An object defining the `popoverProps` for the split side
+	 * `BorderControl` dropdowns.
 	 */
-	popoverClassNames?: PopoverClassNames;
+	popoversProps?: PopoversProps;
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border
diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index e7bad227f72edd..175d96edd93843 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -141,8 +141,7 @@ const BorderControlDropdown = (
 		onReset,
 		onColorChange,
 		onStyleChange,
-		popoverClassName,
-		popoverContentClassName,
+		popoverProps,
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
@@ -199,7 +198,6 @@ const BorderControlDropdown = (
 					</HStack>
 				) : undefined }
 				<ColorPalette
-					className={ popoverContentClassName }
 					value={ color }
 					onChange={ onColorChange }
 					{ ...{ colors, disableCustomColors } }
@@ -237,7 +235,7 @@ const BorderControlDropdown = (
 		<Dropdown
 			renderToggle={ renderToggle }
 			renderContent={ renderContent }
-			contentClassName={ popoverClassName }
+			popoverProps={ popoverProps }
 			{ ...otherProps }
 			ref={ forwardedRef }
 		/>
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index 789dd7870cca50..fb49a3488ac05c 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -20,8 +20,8 @@ export function useBorderControlDropdown(
 		border,
 		className,
 		colors,
-		contentClassName,
 		onChange,
+		popoverProps,
 		previousStyleSelection,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
@@ -65,17 +65,13 @@ export function useBorderControlDropdown(
 	}, [ border, cx ] );
 
 	const popoverClassName = useMemo( () => {
-		return cx( styles.borderControlPopover, contentClassName );
-	}, [ cx, contentClassName ] );
+		return cx( styles.borderControlPopover, popoverProps?.className );
+	}, [ cx, popoverProps?.className ] );
 
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );
 	}, [ cx ] );
 
-	const popoverContentClassName = useMemo( () => {
-		return cx( styles.borderControlPopoverContent );
-	}, [ cx ] );
-
 	const resetButtonClassName = useMemo( () => {
 		return cx( styles.resetButton );
 	}, [ cx ] );
@@ -90,8 +86,7 @@ export function useBorderControlDropdown(
 		onColorChange,
 		onStyleChange,
 		onReset,
-		popoverClassName,
-		popoverContentClassName,
+		popoverProps: { ...popoverProps, className: popoverClassName },
 		popoverControlsClassName,
 		resetButtonClassName,
 	};
diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index aa8b439d8326bb..089f256f88e6b3 100644
--- a/packages/components/src/border-control/border-control/README.md
+++ b/packages/components/src/border-control/border-control/README.md
@@ -113,10 +113,10 @@ _Note: the value may be `undefined` if a user clears all border properties._
 
 - Required: Yes
 
-### `popoverContentClassName`: `string`
+### `popoverProps`: `Object`
 
-A custom CSS class name to be assigned to the `BorderControl`'s dropdown
-popover content.
+Properties of the `popoverProps` object will be passed as props to the border
+control's dropdown popover.
 
 - Required: No
 
diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index cf170861ea6c85..dd2d90f7d3cdff 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -43,7 +43,7 @@ const BorderControl = (
 		onSliderChange,
 		onWidthChange,
 		placeholder,
-		popoverContentClassName,
+		popoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
 		sliderClassName,
@@ -68,11 +68,11 @@ const BorderControl = (
 					<BorderControlDropdown
 						border={ border }
 						colors={ colors }
-						contentClassName={ popoverContentClassName }
 						disableCustomColors={ disableCustomColors }
 						enableAlpha={ enableAlpha }
 						enableStyle={ enableStyle }
 						onChange={ onBorderChange }
+						popoverProps={ popoverProps }
 						previousStyleSelection={ previousStyleSelection }
 						showDropdownHeader={ showDropdownHeader }
 						__experimentalHasMultipleOrigins={
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index 0dfaaccc8f87f1..97b2d4a5e7d9d5 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -136,7 +136,6 @@ export const borderControlPopoverControls = css`
 	}
 `;
 
-export const borderControlPopoverContent = css``;
 export const borderColorIndicator = css``;
 
 export const resetButton = css`
diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index 0a5971819d91fb..b9243799d192cf 100644
--- a/packages/components/src/border-control/types.ts
+++ b/packages/components/src/border-control/types.ts
@@ -21,6 +21,24 @@ export type ColorOrigin = {
 
 export type Colors = ColorOrigin[] | Color[];
 
+/**
+ * Represents the available props that can be passed through the border control
+ * dropdown's `popoverProps`. This should be replaced once the Dropdown or
+ * Popover components are typed.
+ */
+export type DropdownPopoverProps = {
+	className?: string;
+	focusOnMount?: boolean;
+	position?: string;
+	onClose?: () => void;
+	onFocusOutside?: () => void;
+	expandOnMobile?: boolean;
+	headerTitle?: string;
+	noArrow?: boolean;
+	anchorRect?: DOMRect;
+	getAnchorRect?: ( ref: HTMLAnchorElement ) => DOMRect;
+};
+
 export type ColorProps = {
 	/**
 	 * An array of color definitions. This may also be a multi-dimensional array
@@ -81,10 +99,10 @@ export type BorderControlProps = ColorProps &
 		 */
 		onChange: ( value?: Border ) => void;
 		/**
-		 * A custom CSS class name to be assigned to the border control's
-		 * dropdown popover content.
+		 * Properties of the `popoverProps` object will be passed as props to
+		 * the border control's dropdown popover.
 		 */
-		popoverContentClassName?: string;
+		popoverProps?: DropdownPopoverProps;
 		/**
 		 * If opted into, sanitizing the border means that if no width or color
 		 * have been selected, the border style is also cleared and `undefined`
@@ -123,11 +141,6 @@ export type DropdownProps = ColorProps & {
 	 * values for its popover controls.
 	 */
 	border?: Border;
-	/**
-	 * A custom CSS class name to be assigned to the border control's
-	 * dropdown popover content.
-	 */
-	contentClassName?: string;
 	/**
 	 * This controls whether to render border style options.
 	 *
@@ -138,6 +151,11 @@ export type DropdownProps = ColorProps & {
 	 * A callback invoked when the border color or style selections change.
 	 */
 	onChange: ( newBorder?: Border ) => void;
+	/**
+	 * Properties of the `popoverProps` object will be passed as props to the
+	 * border control's dropdown popover.
+	 */
+	popoverProps?: DropdownPopoverProps;
 	/**
 	 * Any previous style selection made by the user. This can be used to
 	 * reapply that previous selection when, for example, a zero border width is
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index 9e2745fd575747..f590383c5f57fa 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -152,17 +152,19 @@ const extractColorNameFromCurrentValue = (
 	return __( 'Custom' );
 };
 
-export default function ColorPalette( {
-	clearable = true,
-	className,
-	colors,
-	disableCustomColors = false,
-	enableAlpha,
-	onChange,
-	value,
-	__experimentalHasMultipleOrigins = false,
-	__experimentalIsRenderedInSidebar = false,
-} ) {
+export default function ColorPalette( props ) {
+	const {
+		clearable = true,
+		className,
+		colors,
+		disableCustomColors = false,
+		enableAlpha,
+		onChange,
+		value,
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
+	} = props;
+
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 	const showMultiplePalettes =
 		__experimentalHasMultipleOrigins && colors?.length;