diff --git a/docs/content/docs/components/tabs.md b/docs/content/docs/components/tabs.md
index 8d5c4cf55a..4afad6ec3a 100644
--- a/docs/content/docs/components/tabs.md
+++ b/docs/content/docs/components/tabs.md
@@ -118,6 +118,10 @@ The indicator that highlights the current active tab.
       cssVariable: '--reka-tabs-indicator-size',
       description: 'The size of the indicator.',
     },
+    {
+      cssVariable: '--reka-tabs-indicator-thickness',
+      description: 'The thickness of the indicator.',
+    },
     {
       cssVariable: '--reka-tabs-indicator-position',
       description: 'The position of the indicator',
diff --git a/packages/core/src/Tabs/TabsIndicator.vue b/packages/core/src/Tabs/TabsIndicator.vue
index e25db01566..1f297f0012 100644
--- a/packages/core/src/Tabs/TabsIndicator.vue
+++ b/packages/core/src/Tabs/TabsIndicator.vue
@@ -20,10 +20,12 @@ useForwardExpose()
 
 interface IndicatorStyle {
   size: number | null
+  thickness: number | null
   position: number | null
 }
 const indicatorStyle = ref<IndicatorStyle>({
   size: null,
+  thickness: null,
   position: null,
 })
 const tabs = ref<Array<HTMLElement>>([])
@@ -47,12 +49,14 @@ function updateIndicatorStyle() {
   if (context.orientation.value === 'horizontal') {
     indicatorStyle.value = {
       size: activeTab.offsetWidth,
+      thickness: activeTab.offsetHeight,
       position: activeTab.offsetLeft,
     }
   }
   else {
     indicatorStyle.value = {
       size: activeTab.offsetHeight,
+      thickness: activeTab.offsetWidth,
       position: activeTab.offsetTop,
     }
   }
@@ -65,6 +69,7 @@ function updateIndicatorStyle() {
     v-bind="props"
     :style="{
       '--reka-tabs-indicator-size': `${indicatorStyle.size}px`,
+      '--reka-tabs-indicator-thickness': `${indicatorStyle.thickness}px`,
       '--reka-tabs-indicator-position': `${indicatorStyle.position}px`,
     }"
   >