diff --git a/packages/block-directory/src/components/downloadable-block-icon/style.scss b/packages/block-directory/src/components/downloadable-block-icon/style.scss
index 57a792b3f7f6e3..e11c1f05e864f8 100644
--- a/packages/block-directory/src/components/downloadable-block-icon/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-icon/style.scss
@@ -3,5 +3,5 @@
 	width: $button-size * 1.5;
 	height: $button-size * 1.5;
 	vertical-align: middle;
-	border: 1px solid $gray-300;
+	border: $border-width solid $gray-300;
 }
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 6bf1f91cb08682..000be3d239e8d9 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -231,7 +231,7 @@
 		}
 
 		.block-editor-block-parent-selector__button {
-			border: 1px solid $gray-900;
+			border: $border-width solid $gray-900;
 			padding-right: 6px;
 			padding-left: 6px;
 			background-color: $white;
diff --git a/packages/block-editor/src/components/block-variation-transforms/style.scss b/packages/block-editor/src/components/block-variation-transforms/style.scss
index b828bc6020bfbe..cfb0ff04a5bc80 100644
--- a/packages/block-editor/src/components/block-variation-transforms/style.scss
+++ b/packages/block-editor/src/components/block-variation-transforms/style.scss
@@ -3,7 +3,7 @@
 	width: 100%;
 
 	.components-dropdown-menu__toggle {
-		border: 1px solid $gray-700;
+		border: $border-width solid $gray-700;
 		border-radius: $radius-block-ui;
 		min-height: 30px;
 		width: 100%;
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index acd5fd6f41c7bc..e979ed77f53da2 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -73,7 +73,7 @@
 
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-	border: 1px solid $gray-300;
+	border: $border-width solid $gray-300;
 	border-radius: 2px;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
@@ -101,7 +101,7 @@
 }
 
 .block-editor-global-styles-background-panel__image-tools-panel-item {
-	border: 1px solid $gray-300;
+	border: $border-width solid $gray-300;
 	border-radius: 2px;
 
 	// Full width. ToolsPanel lays out children in a grid.
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index c0cf8a3bc2afe9..1390a285fe163e 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -77,7 +77,7 @@ $block-editor-link-control-number-of-actions: 1;
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
 		display: block;
-		border: 1px solid $gray-600;
+		border: $border-width solid $gray-600;
 		border-radius: $radius-block-ui;
 		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index e6ba17a71aaa5b..5afb22269765e2 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/packages/block-editor/src/components/url-input/style.scss
@@ -121,7 +121,7 @@ $input-size: 300px;
 
 .block-editor-url-input__button-modal {
 	box-shadow: $elevation-x-small;
-	border: 1px solid $gray-300;
+	border: $border-width solid $gray-300;
 	background: $white;
 }
 
diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss
index ff6bf1090b0dcd..e69853bad95997 100644
--- a/packages/commands/src/components/style.scss
+++ b/packages/commands/src/components/style.scss
@@ -30,7 +30,7 @@
 	.components-button {
 		height: $grid-unit-70;
 		width: $grid-unit-70;
-		border: 1px solid $gray-600;
+		border: $border-width solid $gray-600;
 		border-right: 0;
 		justify-content: center;
 		border-radius: $radius-block-ui 0 0 $radius-block-ui;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 8a3b890a2c62f1..d111e388b48aa6 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -61,6 +61,8 @@
 -   `Popover`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
 -   `Snackbar`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
 -   `TextareaControl`: Update styles ([#64586](https://github.com/WordPress/gutenberg/pull/64586)).
+-   `CircularOptionPicker`: Update hard-coded border-width value ([#64680](https://github.com/WordPress/gutenberg/pull/64680)).
+-   `CustomGradientPicker`: Update hard-coded border-width value ([#64680](https://github.com/WordPress/gutenberg/pull/64680)).
 
 ### Bug Fixes
 
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 74a380e0936be8..24b67eb7e7021e 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -109,7 +109,7 @@ $color-palette-circle-spacing: 12px;
 		border-radius: $radius-round;
 		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 		// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
-		border: 1px solid transparent;
+		border: $border-width solid transparent;
 		box-sizing: inherit;
 	}
 
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index a8c6d6b872caf0..a0b616d6ca1d72 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -112,7 +112,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		&.is-pressed {
 			> svg {
 				background: $white;
-				border: 1px solid $gray-600;
+				border: $border-width solid $gray-600;
 				border-radius: 2px;
 			}
 		}
diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss
index 6912b5cc483164..3853aba960e790 100644
--- a/packages/dataviews/src/components/dataviews-filters/style.scss
+++ b/packages/dataviews/src/components/dataviews-filters/style.scss
@@ -48,7 +48,7 @@
 
 	.dataviews-filters__summary-chip {
 		border-radius: $grid-unit-20;
-		border: 1px solid transparent;
+		border: $border-width solid transparent;
 		cursor: pointer;
 		padding: $grid-unit-05 $grid-unit-15;
 		min-height: $grid-unit-40;
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index 5f9cd89b74ce2c..922083d14b75eb 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -81,7 +81,7 @@
 }
 
 .edit-site-custom-template-modal__no-results {
-	border: 1px solid $gray-400;
+	border: $border-width solid $gray-400;
 	border-radius: $radius-block-ui;
 	padding: $grid-unit-20;
 }
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index fbc231eb757c57..10efff92af6434 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -12,7 +12,7 @@
 	box-sizing: border-box;
 	width: $sidebar-width;
 	background-color: $white;
-	border: 1px dotted $gray-300;
+	border: $border-width dotted $gray-300;
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index ce5197a73cabf9..a9a0784cbcb5a1 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -92,7 +92,7 @@ $footer-height: 70px;
 }
 
 .font-library-modal__font-card {
-	border: 1px solid $gray-200;
+	border: $border-width solid $gray-200;
 	width: 100%;
 	height: auto;
 	padding: $grid-unit-20;
diff --git a/packages/editor/src/components/block-manager/style.scss b/packages/editor/src/components/block-manager/style.scss
index 62e5c9d60cb178..411ee9faf34f75 100644
--- a/packages/editor/src/components/block-manager/style.scss
+++ b/packages/editor/src/components/block-manager/style.scss
@@ -9,8 +9,8 @@
 }
 
 .editor-block-manager__disabled-blocks-count {
-	border: 1px solid $gray-300;
-	border-width: 1px 0;
+	border: $border-width solid $gray-300;
+	border-width: $border-width 0;
 	// Cover up horizontal areas off the sides of the box rectangle
 	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
 	padding: $grid-unit-10;
diff --git a/packages/editor/src/components/error-boundary/style.native.scss b/packages/editor/src/components/error-boundary/style.native.scss
index 1ff5c1799915d6..413242a1779947 100644
--- a/packages/editor/src/components/error-boundary/style.native.scss
+++ b/packages/editor/src/components/error-boundary/style.native.scss
@@ -86,7 +86,7 @@
 }
 
 .copy-button__container--secondary {
-	border: 1px #c6c6c8;
+	border: $border-width #c6c6c8;
 	background-color: $white;
 }
 
diff --git a/packages/editor/src/components/save-publish-panels/style.scss b/packages/editor/src/components/save-publish-panels/style.scss
index 74dcf113f0479b..1de6420a0a6837 100644
--- a/packages/editor/src/components/save-publish-panels/style.scss
+++ b/packages/editor/src/components/save-publish-panels/style.scss
@@ -3,7 +3,7 @@
 .editor-layout__toggle-sidebar-panel,
 .editor-layout__toggle-entities-saved-states-panel {
 	z-index: z-index(".editor-layout__toggle-sidebar-panel");
-	position: fixed !important; // Need to override the default relative positionning
+	position: fixed !important; // Necessary to override the default relative positioning.
 	top: -9999em;
 	bottom: auto;
 	left: auto;
@@ -11,8 +11,8 @@
 	box-sizing: border-box;
 	width: $sidebar-width;
 	background-color: $white;
-	border: 1px dotted $gray-300;
-	height: auto !important; // Need to override the default sidebar positionnings
+	border: $border-width dotted $gray-300;
+	height: auto !important; // Necessary to override the default sidebar positioning.
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss
index 78bcf533ac5e9d..6b04ce0a407e43 100644
--- a/packages/widgets/src/blocks/legacy-widget/editor.scss
+++ b/packages/widgets/src/blocks/legacy-widget/editor.scss
@@ -4,9 +4,9 @@
 	}
 	background: $white;
 	border-radius: $radius-block-ui;
-	border: 1px solid $gray-900;
-	padding: $grid-unit-15 - 1px; // Subtract the border width.
-	max-height: calc(100vh - 2px); // Subtract the border width (both top and bottom).
+	border: $border-width solid $gray-900;
+	padding: $grid-unit-15 - $border-width;
+	max-height: calc(100vh - #{ $border-width } - #{ $border-width });
 	overflow-y: scroll;
 
 	.wp-block-legacy-widget__edit-form-title {
@@ -57,7 +57,7 @@
 			font-family: system-ui;
 			background-color: transparent;
 			box-sizing: border-box;
-			border: 1px solid $gray-700;
+			border: $border-width solid $gray-700;
 			border-radius: 3px;
 			box-shadow: none;
 			color: $black;
@@ -96,7 +96,7 @@
 
 	&:hover::after {
 		border-radius: $radius-block-ui;
-		border: 1px solid $gray-600;
+		border: $border-width solid $gray-600;
 		bottom: 0;
 		content: "";
 		left: 0;
diff --git a/packages/widgets/src/blocks/widget-group/editor.scss b/packages/widgets/src/blocks/widget-group/editor.scss
index f854c792eeb240..38798ef34c7c6e 100644
--- a/packages/widgets/src/blocks/widget-group/editor.scss
+++ b/packages/widgets/src/blocks/widget-group/editor.scss
@@ -1,7 +1,7 @@
 .wp-block-widget-group {
 	&.has-child-selected::after {
 		border-radius: $radius-block-ui;
-		border: 1px solid var(--wp-admin-theme-color);
+		border: $border-width solid var(--wp-admin-theme-color);
 		bottom: 0;
 		content: "";
 		left: 0;