diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 7fda170813add..1c30d4f053d66 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -52,6 +52,7 @@ $resize-handler-size: 16px;
 $resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 
 // Blocks
+$block-left-border-width: $border-width * 3;
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: 28px; // Width of the movers/drag handle UI.
diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
index 6b1a15b95ec7b..86ab07f3e28ab 100644
--- a/assets/stylesheets/_z-index.scss
+++ b/assets/stylesheets/_z-index.scss
@@ -9,6 +9,7 @@ $z-layers: (
 	".block-library-classic__toolbar": 10,
 	".block-editor-block-list__layout .reusable-block-indicator": 1,
 	".block-editor-block-list__breadcrumb": 2,
+	".editor-inner-blocks .block-editor-block-list__breadcrumb": 22,
 	".components-form-toggle__input": 1,
 	".components-panel__header.edit-post-sidebar__panel-tabs": -1,
 	".edit-post-sidebar .components-panel": -2,
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index bca7a3dc5f654..4a72cb3ed3423 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -11,7 +11,7 @@
 	// While block is being dragged, dim the slot dragged from, and hide some UI.
 	&.is-dragging {
 		.block-editor-block-list__block-edit::before {
-			outline: none;
+			border: none;
 		}
 
 		> .block-editor-block-list__block-edit > * {
@@ -105,7 +105,7 @@
 	}
 
 	/**
-	 * Block outline layout
+	 * Block border layout
 	 */
 
 	.block-editor-block-list__block-edit {
@@ -115,10 +115,15 @@
 			z-index: z-index(".block-editor-block-list__block-edit::before");
 			content: "";
 			position: absolute;
-			outline: $border-width solid transparent;
-			transition: outline 0.1s linear;
+			border: $border-width solid transparent;
+			border-left: none;
+			box-shadow: none;
+			transition: border-color 0.1s linear, box-shadow 0.1s linear;
 			pointer-events: none;
 
+			// Include a transparent outline for Windows High Contrast mode.
+			outline: $border-width solid transparent;
+
 			// Go edge-to-edge on mobile.
 			right: -$block-padding;
 			left: -$block-padding;
@@ -128,18 +133,36 @@
 	}
 
 	// Selected style.
-	&.is-selected > .block-editor-block-list__block-edit::before {
-		// Use opacity to work in various editor styles.
-		outline: $border-width solid $dark-opacity-light-500;
+	&.is-selected {
 
-		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+		> .block-editor-block-list__block-edit::before {
+			// Use opacity to work in various editor styles.
+			border-color: $dark-opacity-light-800;
+			box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;
+
+			.is-dark-theme & {
+				border-color: $light-opacity-light-800;
+				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
+			}
+
+			// Switch to outset borders on larger screens.
+			@include break-small() {
+				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+				.is-dark-theme & {
+					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+				}
+			}
 		}
 	}
 
 	// Hover style.
 	&.is-hovered > .block-editor-block-list__block-edit::before {
-		outline: $border-width solid theme(outlines);
+		box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
+
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $dark-gray-600;
+		}
 	}
 
 	// Spotlight mode.
@@ -213,12 +236,23 @@
 		}
 	}
 
-	&.has-warning:not(.is-hovered) .block-editor-block-list__block-edit::before {
+	&.has-warning .block-editor-block-list__block-edit::before {
+		// Use opacity to work in various editor styles.
+		border-color: $dark-opacity-light-500;
+		border-left: $border-width solid $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-600;
+		}
+	}
+
+	&.has-warning.is-selected .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline-color: $dark-opacity-light-500;
+		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+			border-color: $light-opacity-light-800;
 		}
 	}
 
@@ -260,11 +294,21 @@
 
 	// Reusable blocks
 	&.is-reusable > .block-editor-block-list__block-edit::before {
+		border: $border-width dashed $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-600;
+		}
+	}
+
+	&.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline: $border-width dashed $dark-opacity-light-500;
+		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+			border-color: $light-opacity-light-800;
+			border-left-color: transparent;
 		}
 	}
 
@@ -278,7 +322,7 @@
 		// When images are floated, the block itself should collapse to zero height.
 		height: 0;
 
-		// Hide block outline when an image is floated.
+		// Hide block border when an image is floated.
 		.block-editor-block-list__block-edit {
 			&::before {
 				content: none;
@@ -296,7 +340,7 @@
 		// Position toolbar better on mobile.
 		.block-editor-block-contextual-toolbar {
 			width: auto;
-			border-bottom: $border-width solid $light-gray-500;
+			border-bottom: $border-width solid $light-gray-800;
 			bottom: auto;
 		}
 	}
@@ -424,9 +468,9 @@
 
 	// Full-wide
 	&[data-align="full"] {
-		// Position hover label on the right for the top level block.
+		// Position hover label on the left for the top level block.
 		> .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
-			right: 0;
+			left: 0;
 		}
 
 		// Compensate for main container padding and subtract border.
@@ -595,13 +639,16 @@
 		margin-top: $block-toolbar-height;
 		margin-right: -$block-padding;
 		margin-left: -$block-padding;
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
 		height: $block-toolbar-height;
 
 		@include break-small() {
 			display: none;
 		}
 
+		// Add a white background to prevent the block's left border from showing through.
+		background-color: $white;
+
 		// Show a shadow below the selected block to imply separation.
 		box-shadow: $shadow-below-only;
 		@include break-small() {
@@ -707,7 +754,7 @@
 
 	// Hide both the button until hovered.
 	opacity: 0;
-	transition: opacity 0.1s linear 0.1s;
+	transition: opacity 0.1s linear;
 
 	&:hover,
 	&.is-visible {
@@ -791,12 +838,12 @@
 
 		// Position toolbar below the block on mobile.
 		position: absolute;
-		bottom: $block-toolbar-height - $block-padding;
+		bottom: $block-toolbar-height - $block-padding - $border-width;
 		left: -$block-padding;
 		right: -$block-padding;
 
 		// Paint the borders on the toolbar itself on mobile.
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
 		.components-toolbar {
 			border-top: none;
 			border-bottom: none;
@@ -805,17 +852,31 @@
 		@include break-small() {
 			border-top: none;
 			.components-toolbar {
-				border-top: $border-width solid $light-gray-500;
-				border-bottom: $border-width solid $light-gray-500;
+				border-top: $border-width solid $light-gray-800;
+				border-bottom: $border-width solid $light-gray-800;
 			}
 		}
 	}
 
-	// Floated items have special needs for the contextual toolbar position.
+	// Floated items have special needs for the contextual toolbar position + the thicker left border.
 	&[data-align="left"] .block-editor-block-contextual-toolbar,
 	&[data-align="right"] .block-editor-block-contextual-toolbar {
 		margin-bottom: $border-width;
 		margin-top: -$block-toolbar-height;
+
+		// Display the box-shadow on the parent element.
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
+
+		@include break-small() {
+			box-shadow: none;
+		}
+
+		.editor-block-toolbar {
+			border-left: none;
+		}
 	}
 
 	// Make block toolbar full width on mobile.
@@ -903,7 +964,8 @@
 
 		// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
 		position: absolute;
-		left: 0;
+		left: $border-width;
+		top: $border-width;
 	}
 }
 
@@ -917,20 +979,24 @@
 	line-height: 1;
 	z-index: z-index(".block-editor-block-list__breadcrumb");
 
-	// Position in the top right of the border.
-	right: -$block-padding;
-	top: -$block-padding - $border-width;
+	// Position in the top left of the border.
+	left: -$block-padding - $block-left-border-width;
+	top: (($block-padding * -2) - $block-left-border-width);
 
 	.components-toolbar {
 		padding: 0;
 		border: none;
-		background: transparent;
 		line-height: 1;
 		font-family: $default-font;
 		font-size: 11px;
 		padding: 4px 4px;
-		background: theme(outlines);
-		color: $white;
+		background: $light-gray-500;
+		color: $dark-gray-900;
+
+		.is-dark-theme & {
+			background: $dark-gray-600;
+			color: $white;
+		}
 
 		// Animate in
 		.block-editor-block-list__block:hover & {
@@ -939,11 +1005,20 @@
 		}
 	}
 
-	// Position the breadcrumb closer on mobile.
-	[data-align="left"] &,
+	// Position this above the toolbar of parent blocks.
+	.editor-inner-blocks & {
+		z-index: z-index(".editor-inner-blocks .block-editor-block-list__breadcrumb");
+	}
+
+	// Remove negative left breadcrumb position for left aligned blocks.
+	[data-align="left"] & {
+		left: 0;
+	}
+
+	// Right-align the breadcrumb for right-aligned blocks.
 	[data-align="right"] & {
+		left: auto;
 		right: 0;
-		top: 0;
 	}
 }
 
@@ -992,12 +1067,12 @@
 .block-editor-block-list__block .block-editor-warning {
 	z-index: z-index(".block-editor-warning");
 	position: relative;
-	margin-right: -$block-padding - $border-width;
-	margin-left: -$block-padding - $border-width;
+	margin-right: -$block-padding;
+	margin-left: -$block-padding;
 
 	// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
-	margin-bottom: -$block-padding - $border-width;
-	transform: translateY(-$block-padding - $border-width);
+	margin-bottom: -$block-padding;
+	transform: translateY(-$block-padding);
 
 	// Bigger padding on mobile where blocks are edge to edge.
 	padding: 10px $block-padding;
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 4b426de6f11d6..e0fbc6601ee36 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -4,22 +4,40 @@
 	width: 100%;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
+	transition: border-color 0.1s linear, box-shadow 0.1s linear;
+	border-left: $border-width solid $light-gray-800;
 
-	// Allow overflow on desktop.
 	@include break-small() {
+		// Allow overflow on desktop.
 		overflow: inherit;
-	}
 
-	// Show a left border on the parent container.
-	border-left: $border-width solid $light-gray-500;
+		// Show a left border on the parent container.
+		border-left: none;
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+		// Show a lighter version for dark themes.
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
+	}
 
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
 		border: 0;
-		border-top: $border-width solid $light-gray-500;
-		border-bottom: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
+		border-bottom: $border-width solid $light-gray-800;
 
 		// Add a right border to show as separator in the block toolbar.
-		border-right: $border-width solid $light-gray-500;
+		border-right: $border-width solid $light-gray-800;
+	}
+
+	// Add a left border and adjust the color for Top Toolbar mode.
+	.has-fixed-toolbar & {
+		box-shadow: none;
+		border-left: $border-width solid $light-gray-500;
+
+		.components-toolbar {
+			border-color: $light-gray-500;
+		}
 	}
 }
diff --git a/packages/block-editor/src/components/warning/style.scss b/packages/block-editor/src/components/warning/style.scss
index 27f571d6a7a77..6af2f5e9a7704 100644
--- a/packages/block-editor/src/components/warning/style.scss
+++ b/packages/block-editor/src/components/warning/style.scss
@@ -13,6 +13,16 @@
 		background-color: transparent;
 	}
 
+	.is-selected & {
+		// Use opacity to work in various editor styles.
+		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-800;
+		}
+	}
+
 	.block-editor-warning__message {
 		line-height: $default-line-height;
 		font-family: $default-font;
diff --git a/packages/block-library/src/block/edit-panel/style.scss b/packages/block-library/src/block/edit-panel/style.scss
index 0b899669c08f2..bb22417472a37 100644
--- a/packages/block-library/src/block/edit-panel/style.scss
+++ b/packages/block-library/src/block/edit-panel/style.scss
@@ -12,6 +12,10 @@
 	padding: $grid-size $block-padding;
 	position: relative;
 
+	// Use opacity to work in various editor styles.
+	border: $border-width dashed $dark-opacity-light-500;
+	border-bottom: none;
+
 	// Show a smaller padding when nested.
 	.block-editor-block-list__layout & {
 		margin: 0 (-$block-padding);
@@ -58,3 +62,13 @@
 		}
 	}
 }
+
+.editor-block-list__layout .is-selected .reusable-block-edit-panel {
+	border-color: $dark-opacity-light-800;
+	border-left-color: transparent;
+
+	.is-dark-theme & {
+		border-color: $light-opacity-light-800;
+		border-left-color: transparent;
+	}
+}
diff --git a/packages/block-library/src/block/indicator/style.scss b/packages/block-library/src/block/indicator/style.scss
index 2e02c866c3d88..08ebbce4674fa 100644
--- a/packages/block-library/src/block/indicator/style.scss
+++ b/packages/block-library/src/block/indicator/style.scss
@@ -1,8 +1,7 @@
 .block-editor-block-list__layout .reusable-block-indicator {
 	background: $white;
-	border-left: $border-width dashed $light-gray-500;
+	border: $border-width dashed $light-gray-500;
 	color: $dark-gray-500;
-	border-bottom: $border-width dashed $light-gray-500;
 	top: -$block-padding;
 	height: 30px;
 	padding: $grid-size-small;
diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
index 2bb0bd4f77a7f..758609eb9d549 100644
--- a/packages/block-library/src/classic/editor.scss
+++ b/packages/block-library/src/classic/editor.scss
@@ -207,7 +207,16 @@
 	}
 
 	.block-editor-block-list__block-edit::before {
-		outline: $border-width solid #e2e4e7;
+		transition: border-color 0.1s linear, box-shadow 0.1s linear;
+		border: $border-width solid $light-gray-500;
+
+		// Windows High Contrast mode will show this outline.
+		outline: $border-width solid transparent;
+	}
+
+	&.is-selected .block-editor-block-list__block-edit::before {
+		border-color: $light-gray-800;
+		border-left-color: transparent;
 	}
 
 	// Don't show block type label for classic block
@@ -228,10 +237,17 @@ div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div {
 	z-index: z-index(".block-library-classic__toolbar");
 	top: $block-padding;
 	transform: translateY(-$block-padding);
+	border: $border-width solid $light-gray-500;
+	border-bottom: none;
 
 	// On mobile, toolbars go edge to edge.
 	padding: 0 $block-padding;
 
+	.is-selected & {
+		border-color: $light-gray-800;
+		border-left-color: transparent;
+	}
+
 	@include break-small() {
 		padding: 0;
 	}
@@ -289,12 +305,13 @@ div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div {
 		}
 		.block-editor-block-contextual-toolbar {
 			float: right;
-			margin-right: $icon-button-size - $block-padding + $border-width;
+			margin-right: $icon-button-size - $block-padding + ($border-width * 3);
 			transform: translateY(-#{ $block-padding - $border-width });
 			top: $block-padding;
 
 			.block-editor-block-toolbar {
 				border: none;
+				box-shadow: none;
 
 				// Match the TinyMCE "mobile" breakpoint buttons alignment.
 				margin-top: 3px;
@@ -309,6 +326,10 @@ div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div {
 					margin-top: $grid-size-small;
 					margin-bottom: $grid-size-small;
 				}
+
+				.components-toolbar__control.components-button:hover {
+					background-color: transparent;
+				}
 			}
 
 			.components-toolbar {
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index aa3ee7cbc7995..1ba9ce38e0113 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -27,12 +27,13 @@
 			margin-right: -$block-side-ui-width;
 		}
 
-		// Center the block toolbar on wide and full-wide blocks.
+		// Center the block toolbar on full-wide blocks.
 		// Use specific selector to not affect nested block toolbars.
-		&[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,
 		&[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
-			width: calc(100% + #{ $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
 			height: 0; // This collapses the container to an invisible element without margin.
+			width: 100%;
+			margin-left: 0;
+			margin-right: 0;
 			text-align: center;
 
 			// This float rule takes the toolbar out of the flow, without it having to be absolute positioned.
@@ -49,13 +50,6 @@
 				position: relative;
 			}
 		}
-
-		// The centering math is simpler for a fullwide block, which doesn't have any block padding.
-		&[data-align="full"] > .block-editor-block-list__block-edit > .editor-block-contextual-toolbar {
-			width: 100%;
-			margin-left: 0;
-			margin-right: 0;
-		}
 	}
 }
 
diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
index c35abcb009dfc..5b13e75843994 100644
--- a/packages/editor/src/components/post-permalink/style.scss
+++ b/packages/editor/src/components/post-permalink/style.scss
@@ -7,11 +7,21 @@
 	font-size: $default-font-size;
 	height: 40px;
 	white-space: nowrap;
-
-	// Use opacity to work in various editor styles.
-	border: $border-width solid $dark-opacity-light-500;
+	border: $border-width solid $light-gray-800;
 	background-clip: padding-box;
 
+	// Show a thick left border to match the left border on the title field.
+	border-left: 0;
+	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+	// Use a lighter border for dark themes.
+	.is-dark-theme & {
+		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+	}
+
+	// Include transparent outline for Windows High Contrast mode.
+	outline: $border-width solid transparent;
+
 	// Put toolbar snugly to edge on mobile.
 	margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen.
 	margin-right: -$block-padding - $border-width;
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 71fc698dea202..a065097cd6465 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -16,7 +16,7 @@
 		font-family: $editor-font;
 		line-height: $default-line-height;
 		color: $dark-gray-900;
-		transition: border 0.1s ease-out;
+		transition: border 0.1s ease-out, box-shadow 0.1s linear;
 		padding: #{ $block-padding + 5px } $block-padding;
 		word-break: keep-all;
 
@@ -25,8 +25,12 @@
 		border-left-width: 0;
 		border-right-width: 0;
 
+		// Include transparent outline for Windows High Contrast mode.
+		outline: $border-width solid transparent;
+
 		@include break-small() {
 			border-width: $border-width;
+			border-left-width: 0;
 		}
 
 		// Match h1 heading.
@@ -49,18 +53,29 @@
 
 	&:not(.is-focus-mode) {
 		&.is-selected .editor-post-title__input {
-			// use opacity to work in various editor styles
-			border-color: $dark-opacity-light-500;
+			// use opacity to work in various editor styles.
+			border-color: $dark-opacity-light-800;
+			box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;
 
 			.is-dark-theme & {
-				border-color: $light-opacity-light-500;
+				border-color: $light-opacity-light-800;
+				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
+			}
+
+			// Switch to outset borders on larger screens.
+			@include break-small() {
+				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+				.is-dark-theme & {
+					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+				}
 			}
 		}
 	}
 
-	&:not(.is-focus-mode):not(.has-fixed-toolbar) {
+	&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
 		.editor-post-title__input:hover {
-			border-color: theme(outlines);
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
 		}
 	}