diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index cb8183184a813..6ec68347af259 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,8 @@
 ### Bug Fix
 
 -   `PaletteEdit`: Fix padding in RTL languages ([#54034](https://github.com/WordPress/gutenberg/pull/54034)).
+-   `CircularOptionPicker`: make focus styles resilient to button size changes ([#54196](https://github.com/WordPress/gutenberg/pull/54196)).
+
 
 ### Internal
 
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 56c48f63372a1..e0e4f3e81d419 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -116,14 +116,19 @@ $color-palette-circle-spacing: 12px;
 	&:focus {
 		&::after {
 			content: "";
-			border: #{ $border-width * 2 } solid $gray-700;
-			width: 32px;
-			height: 32px;
-			position: absolute;
-			top: -2px;
-			left: -2px;
 			border-radius: $radius-round;
 			box-shadow: inset 0 0 0 2px $white;
+
+			// Make sure it's always centered
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			// Make sure dimensions account for border width
+			border: #{ $border-width * 2 } solid $gray-700;
+			width: calc(100% + #{ ( $border-width * 2 ) * 2 });
+			height: calc(100% + #{ ( $border-width * 2 ) * 2 });
 		}
 	}
 
@@ -139,7 +144,6 @@ $color-palette-circle-spacing: 12px;
 	background: $white;
 }
 
-
 .components-circular-option-picker__dropdown-link-action {
 	margin-right: $grid-unit-20;