diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
index fa79974e2a112..31134cd44d09b 100644
--- a/assets/stylesheets/_mixins.scss
+++ b/assets/stylesheets/_mixins.scss
@@ -195,8 +195,8 @@
 
 @mixin square-style__focus() {
 	color: $dark-gray-900;
-	outline: 1px solid $dark-gray-300;
-	box-shadow: none;
+	outline-offset: -1px;
+	outline: 1px dotted $dark-gray-500;
 }
 
 // Menu items.
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
index 3fcfe94481b4f..457f7e0361b21 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -18,14 +18,14 @@
 .edit-post-sidebar__panel-tab {
 	background: transparent;
 	border: none;
-	border-radius: 0;
+	box-shadow: none;
 	cursor: pointer;
-	height: $grid-size * 6;
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;
 	color: $dark-gray-900;
 	@include square-style__neutral;
+	transition: box-shadow 0.1s linear;
 
 	// This pseudo-element "duplicates" the tab label and sets the text to bold.
 	// This ensures that the tab doesn't change width when selected.
@@ -41,9 +41,20 @@
 	}
 
 	&.is-active {
-		padding-bottom: 0;
-		border-bottom: 3px solid theme(primary);
+		box-shadow: inset 0 -3px theme(outlines);
 		font-weight: 600;
+		position: relative;
+
+		// This border appears in Windows High Contrast mode instead of the box-shadow.
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			bottom: 1px;
+			right: 0;
+			left: 0;
+			border-bottom: 3px solid transparent;
+		}
 	}
 
 	&:focus {
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
index 823256093ffbb..cfc42eb75f7b3 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/edit-post/src/components/sidebar/style.scss
@@ -163,18 +163,30 @@
 .edit-post-sidebar__panel-tab {
 	background: transparent;
 	border: none;
-	border-radius: 0;
+	box-shadow: none;
 	cursor: pointer;
 	height: 50px;
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;
 	@include square-style__neutral;
+	transition: box-shadow 0.1s linear;
 
 	&.is-active {
-		padding-bottom: 0;
-		border-bottom: 3px solid theme(primary);
+		box-shadow: inset 0 -3px theme(outlines);
 		font-weight: 600;
+		position: relative;
+
+		// This border appears in Windows High Contrast mode instead of the box-shadow.
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			bottom: 1px;
+			right: 0;
+			left: 0;
+			border-bottom: 3px solid transparent;
+		}
 	}
 
 	&:focus {