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 5366babc266c61..c00196e06079a6 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -31,7 +31,9 @@ export function useBorderControlDropdown(
 	} = useContextSystem( props, 'BorderControlDropdown' );
 
 	const [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );
-	const hasZeroWidth = widthValue === 0;
+	// If widthValue is 0, or on initial render we have width undefined.
+	// Need to set width to `1px`, if we change color first before adding border width.
+	const hasZeroWidth = widthValue === 0 || undefined === widthValue;
 
 	const onColorChange = ( color?: string ) => {
 		const style =