diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1d8ebd35885a38..dd3002aa4a0515 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -33,6 +33,7 @@
 -   `InputControl`: Vertically center the value of date and time inputs in Safari ([#81361](https://github.com/WordPress/gutenberg/pull/81361)).
 -   `ControlWithError`: Re-read the target's validation message when an `invalid` event is received, so a message that changed without a re-render in between (e.g. a programmatic value change followed by a synthetic `invalid` event) is not revealed stale or empty. While a `validating` custom validity is pending, the message is left untouched so the pending indicator keeps showing ([#81440](https://github.com/WordPress/gutenberg/pull/81440)).
 -   `Button`: Apply the `has-text` class when the children that render the label are conditional, wrapped in an element, or preceded by other children, so that such buttons are no longer styled as icon-only buttons ([#81521](https://github.com/WordPress/gutenberg/pull/81521)).
+-   `BorderControl`: Use `1px` width when selecting the border color initially without explicitly setting width ([#69112](https://github.com/WordPress/gutenberg/pull/69112)).
 
 ### TypeScript
 
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 c6382bc1d49827..e47e0d68d862f2 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -22,7 +22,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 = 0 === widthValue || undefined === widthValue;
 
 	const onColorChange = ( color?: string ) => {
 		const style =
diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js
index 084de766ade03e..2a4c3084e712a4 100644
--- a/packages/components/src/border-control/test/index.js
+++ b/packages/components/src/border-control/test/index.js
@@ -508,7 +508,7 @@ describe( 'BorderControl', () => {
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: '#bd8600',
 				style: undefined,
-				width: undefined,
+				width: '1px',
 			} );
 
 			await user.type( getWidthInput(), '0' );
@@ -537,7 +537,7 @@ describe( 'BorderControl', () => {
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: undefined,
 				style: 'dashed',
-				width: undefined,
+				width: '1px',
 			} );
 
 			await user.type( getWidthInput(), '0' );