diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d1e75d9e0a3a88..f19e7f7eae7baa 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)).
+
 ## 28.10.0 (2024-10-16)
 
 ### Bug Fixes
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 9d922a8130692a..278aacb22914bb 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -26,10 +26,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	&::after {
 		content: "";
 		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
+		inset: $border-width;
 		z-index: -1;
 		// The background image creates a checkerboard pattern. Ignore rtlcss to
 		// make it work both in LTR and RTL.
@@ -41,6 +38,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 		background-position: 0 0, 24px 24px;
 		/*rtl:end:ignore*/
 		background-size: calc(2 * 24px) calc(2 * 24px);
+		border-radius: $radius-medium - $border-width $radius-medium - $border-width 0 0;
 	}
 }