fix #51939

src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css

@@ -41,30 +41,6 @@
 	padding-left: 10px;
 }
 
-.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top::before {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 5;
-	pointer-events: none;
-	background-color: var(--tab-border-top-color);
-	width: 100%;
-	height: 1px;
-}
-
-.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom::after {
-	content: '';
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	z-index: 5;
-	pointer-events: none;
-	background-color: var(--tab-border-bottom-color);
-	width: 100%;
-	height: 1px;
-}
-
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-right,
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-off {
 	padding-left: 5px; /* reduce padding when we show icons and are in shrinking mode and tab close button is not left */
@@ -109,6 +85,39 @@
 	padding-right: 10px;
 }
 
+/* Tab border top/bottom */
+
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-top-container,
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-bottom-container {
+	display: none; /* hidden by default until a color is provided (see below) */
+}
+
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container {
+	display: block;
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 5;
+	pointer-events: none;
+	background-color: var(--tab-border-top-color);
+	width: 100%;
+	height: 1px;
+}
+
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container {
+	display: block;
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 5;
+	pointer-events: none;
+	background-color: var(--tab-border-bottom-color);
+	width: 100%;
+	height: 1px;
+}
+
 /* Tab Label */
 
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label {

src/vs/workbench/browser/parts/editor/tabsTitleControl.ts

@@ -383,6 +383,11 @@ export class TabsTitleControl extends TitleControl {
 		// Gesture Support
 		Gesture.addTarget(tabContainer);
 
+		// Tab Border Top
+		const tabBorderTopContainer = document.createElement('div');
+		addClass(tabBorderTopContainer, 'tab-border-top-container');
+		tabContainer.appendChild(tabBorderTopContainer);
+
 		// Tab Editor Label
 		const editorLabel = this.instantiationService.createInstance(ResourceLabel, tabContainer, void 0);
 		this.tabLabelWidgets.push(editorLabel);
@@ -392,6 +397,11 @@ export class TabsTitleControl extends TitleControl {
 		addClass(tabCloseContainer, 'tab-close');
 		tabContainer.appendChild(tabCloseContainer);
 
+		// Tab Border Bottom
+		const tabBorderBottomContainer = document.createElement('div');
+		addClass(tabBorderBottomContainer, 'tab-border-bottom-container');
+		tabContainer.appendChild(tabBorderBottomContainer);
+
 		const tabActionRunner = new EditorCommandsContextActionRunner({ groupId: this.group.id, editorIndex: index });
 
 		const tabActionBar = new ActionBar(tabCloseContainer, { ariaLabel: localize('araLabelTabActions', "Tab actions"), actionRunner: tabActionRunner });