diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
index 83979b2845c4be..b4d47c03efe21a 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -186,39 +186,20 @@ export default function BorderPanel( {
 	const onBorderChange = ( newBorder ) => {
 		// Ensure we have a visible border style when a border width or
 		// color is being selected.
-		const newBorderWithStyle = applyAllFallbackStyles( newBorder );
+		const updatedBorder = applyAllFallbackStyles( newBorder );
 
-		// As we can't conditionally generate styles based on if other
-		// style properties have been set we need to force split border
-		// definitions for user set border styles. Border radius is derived
-		// from the same property i.e. `border.radius` if it is a string
-		// that is used. The longhand border radii styles are only generated
-		// if that property is an object.
-		//
-		// For borders (color, style, and width) those are all properties on
-		// the `border` style property. This means if the theme.json defined
-		// split borders and the user condenses them into a flat border or
-		// vice-versa we'd get both sets of styles which would conflict.
-		const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
-			? {
-					top: newBorderWithStyle,
-					right: newBorderWithStyle,
-					bottom: newBorderWithStyle,
-					left: newBorderWithStyle,
-			  }
-			: {
-					color: null,
-					style: null,
-					width: null,
-					...newBorderWithStyle,
-			  };
-
-		[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
-			updatedBorder[ side ] = {
-				...updatedBorder[ side ],
-				color: encodeColorValue( updatedBorder[ side ]?.color ),
-			};
-		} );
+		if ( hasSplitBorders( updatedBorder ) ) {
+			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+				if ( updatedBorder[ side ] ) {
+					updatedBorder[ side ] = {
+						...updatedBorder[ side ],
+						color: encodeColorValue( updatedBorder[ side ]?.color ),
+					};
+				}
+			} );
+		} else if ( updatedBorder ) {
+			updatedBorder.color = encodeColorValue( updatedBorder.color );
+		}
 
 		// As radius is maintained separately to color, style, and width
 		// maintain its value. Undefined values here will be cleaned when
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index de6aa349898645..2460a47710699e 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -84,7 +84,7 @@ function styleToAttributes( style ) {
 
 	const borderColorValue = style?.border?.color;
 	const borderColorSlug = borderColorValue?.startsWith( 'var:preset|color|' )
-		? borderColorSlug.substring( 'var:preset|color|'.length )
+		? borderColorValue.substring( 'var:preset|color|'.length )
 		: undefined;
 	const updatedStyle = { ...style };
 	updatedStyle.border = {
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
index 0926e6edd03386..4d95757e2e9dcd 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -29,11 +30,41 @@ export default function BorderPanel( { name, variation = '' } ) {
 	const [ rawSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 
+	const onChange = ( newStyle ) => {
+		// As Global Styles can't conditionally generate styles based on if
+		// other style properties have been set, we need to force split
+		// border definitions for user set global border styles. Border
+		// radius is derived from the same property i.e. `border.radius` if
+		// it is a string that is used. The longhand border radii styles are
+		// only generated if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const { border } = newStyle;
+		const updatedBorder = ! hasSplitBorders( border )
+			? {
+					top: border,
+					right: border,
+					bottom: border,
+					left: border,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...border,
+			  };
+
+		setStyle( { ...newStyle, border: updatedBorder } );
+	};
+
 	return (
 		<StylesBorderPanel
 			inheritedValue={ inheritedStyle }
 			value={ style }
-			onChange={ setStyle }
+			onChange={ onChange }
 			settings={ settings }
 		/>
 	);