diff --git a/.changeset/fresh-horses-burn.md b/.changeset/fresh-horses-burn.md
new file mode 100644
index 00000000000..6a0ceb0966a
--- /dev/null
+++ b/.changeset/fresh-horses-burn.md
@@ -0,0 +1,24 @@
+---
+'@astrojs/starlight': minor
+---
+
+⚠️ Potentially breaking change: Tabs don't use margin-bottom to
+hide border anymore. We also remove the bottom border from `.tab`.
+
+If you want to preserve the previous styling, you can add the following
+custom CSS to your site:
+
+```
+starlight-tabs .tab {
+  margin-bottom: -2px;
+}
+
+starlight-tabs .tab > [role='tab'] {
+  border-bottom: 2px solid var(--sl-color-gray-5);
+}
+
+starlight-tabs .tab [role='tab'][aria-selected='true'] {
+  border-color: var(--sl-color-text-accent);
+  box-shadow: none;
+}
+```
diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro
index d8fa647889e..16f5235635f 100644
--- a/packages/starlight/user-components/Tabs.astro
+++ b/packages/starlight/user-components/Tabs.astro
@@ -116,7 +116,6 @@ if (isSynced) {
 
 		.tab {
 			display: flex;
-			margin-bottom: -2px;
 		}
 		.tab > [role='tab'] {
 			display: flex;
@@ -125,14 +124,13 @@ if (isSynced) {
 			line-height: var(--sl-line-height-headings);
 			padding: 0.275rem 1.25rem;
 			text-decoration: none;
-			border-bottom: 2px solid var(--sl-color-gray-5);
 			color: var(--sl-color-gray-3);
 			outline-offset: var(--sl-outline-offset-inside);
 			overflow-wrap: initial;
 		}
 		.tab [role='tab'][aria-selected='true'] {
 			color: var(--sl-color-white);
-			border-color: var(--sl-color-text-accent);
+			box-shadow: 0 2px 0 var(--sl-color-text-accent);
 			font-weight: 600;
 		}