Tweaks to gradient handle.

packages/components/src/custom-gradient-picker/style.scss

@@ -5,6 +5,7 @@ $components-custom-gradient-picker__padding: 16px; // 48px container, 16px handl
 }
 
 .components-custom-gradient-picker__gradient-bar {
+	border-radius: $radius-block-ui;
 	margin-top: $grid-unit-15;
 	width: 100%;
 	height: $grid-unit-60;
@@ -34,18 +35,25 @@ $components-custom-gradient-picker__padding: 16px; // 48px container, 16px handl
 	}
 
 	.components-custom-gradient-picker__control-point-button {
-		border: 1.5px solid $white;
-		box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
 		border-radius: 50%;
 		height: $grid-unit-20;
 		width: $grid-unit-20;
 		padding: 0;
 		position: absolute;
 		top: $components-custom-gradient-picker__padding;
+
+		// Shadow and stroke.
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 2px 0 rgba($black, 0.25);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+
 		&:focus,
 		&.is-active {
-			box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
-			outline: none;
+			box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 2px 0 rgba($black, 0.25);
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 4px solid transparent;
 		}
 	}
 }