diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
index 923ed47282efb8..764b9c7a201c20 100644
--- a/packages/block-library/src/button/edit.native.js
+++ b/packages/block-library/src/button/edit.native.js
@@ -243,7 +243,7 @@ class ButtonEdit extends Component {
 			...style,
 			border: {
 				...style?.border,
-				radius: newRadius,
+				radius: `${ newRadius }px`, // Store the value with the px value so that it works as expected.
 			},
 		};
 
@@ -368,6 +368,16 @@ class ButtonEdit extends Component {
 		}
 	}
 
+	getBorderRadiusValue( borderRadius, defaultBorderRadius ) {
+		// Return an integer value for the border Radius.
+		// Since that is what the we expect that value to be.
+		if ( Number.isInteger( parseInt( borderRadius ) ) ) {
+			return parseInt( borderRadius );
+		}
+
+		return defaultBorderRadius;
+	}
+
 	render() {
 		const {
 			attributes,
@@ -395,10 +405,11 @@ class ButtonEdit extends Component {
 		}
 
 		const borderRadius = buttonStyle?.border?.radius;
+		const borderRadiusValue = this.getBorderRadiusValue(
+			borderRadius,
+			styles.defaultButton.borderRadius
+		);
 
-		const borderRadiusValue = Number.isInteger( borderRadius )
-			? borderRadius
-			: styles.defaultButton.borderRadius;
 		const outlineBorderRadius =
 			borderRadiusValue > 0
 				? borderRadiusValue + spacing + borderWidth
diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js
index 4bf8168f43c7c2..b70eeb85138324 100644
--- a/packages/block-library/src/buttons/test/edit.native.js
+++ b/packages/block-library/src/buttons/test/edit.native.js
@@ -72,8 +72,8 @@ describe( 'when a button is shown', () => {
 		fireEvent( radiusSlider, 'valueChange', '25' );
 
 		const expectedHtml = `<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":25}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link" href="">Hello</a></div>
+<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"25px"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link" href="" style="border-radius:25px">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );