diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
index 486ea83e219..8d44d43df3f 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
@@ -436,7 +436,7 @@ private void Navigation()
     </Tab>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TabsChromeStyleTitle"]" Introduction="@Localizer["TabsChromeStyleIntro"]" Name="TabStyle">
+<DemoBlock Title="@Localizer["TabsChromeStyleTitle"]" Introduction="@Localizer["TabsChromeStyleIntro"]" Name="Chrome">
     <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome">
         <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
             <div>@Localizer["TabItem1Content"]</div>
@@ -453,6 +453,23 @@ private void Navigation()
     </Tab>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["TabsCapsuleStyleTitle"]" Introduction="@Localizer["TabsCapsuleStyleIntro"]" Name="Capsule">
+    <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Capsule">
+        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
+            <div>@Localizer["TabItem1Content"]</div>
+        </TabItem>
+        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
+            <div>@Localizer["TabItem2Content"]</div>
+        </TabItem>
+        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
+            <div>@Localizer["TabItem3Content"]</div>
+        </TabItem>
+        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
+            <div>@Localizer["TabItem4Content"]</div>
+        </TabItem>
+    </Tab>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />
 
 <MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 983ebb04f82..b2a1b5dc822 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2120,7 +2120,9 @@
     "TabsDisabledIntro": "Disable the current <code>TabItem</code> by setting <code>IsDisabled=\"true\"</code> to prohibit click, drag, close etc.",
     "TabsChromeStyleTitle": "Chrome Style",
     "TabsChromeStyleIntro": "Set the Chrome browser tab style by setting <code>TabStyle=\"TabStyle.Chrome\"</code>. Currently only supports <code>Placement=\"Placement.Top\"</code> mode",
-    "TabAtt2TabStyle": "Set the tab style"
+    "TabAtt2TabStyle": "Set the tab style",
+    "TabsCapsuleStyleTitle": "Capsule Style",
+    "TabsCapsuleStyleIntro": "Set the capsule tab style by setting <code>TabStyle=\"TabStyle.Capsule\"</code>. Currently only supports <code>Placement=\"Placement.Top\"</code> <code>Placement=\"Placement.Bottom\"</code> mode"
   },
   "BootstrapBlazor.Server.Components.Components.DemoTabItem": {
     "Info": "Reset the title of this <code>TabItem</code> by click the button",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index d7e6392ffb6..fe1f214d8de 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -2120,7 +2120,9 @@
     "TabsDisabledIntro": "通过设置 <code>IsDisabled=\"true\"</code> 禁用当前 <code>TabItem</code> 禁止点击、拖动、关闭等操作",
     "TabsChromeStyleTitle": "Chrome 样式",
     "TabsChromeStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Chrome\"</code> 设置 Chrome 浏览器标签页样式，目前仅支持 <code>Placement=\"Placement.Top\"</code> 模式",
-    "TabAtt2TabStyle": "设置标签页样式"
+    "TabAtt2TabStyle": "设置标签页样式",
+    "TabsCapsuleStyleTitle": "胶囊样式",
+    "TabsCapsuleStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Capsule\"</code> 设置标签页为胶囊样式，目前仅支持 <code>Placement=\"Placement.Top\"</code>  <code>Placement=\"Placement.Bottom\"</code> 模式"
   },
   "BootstrapBlazor.Server.Components.Components.DemoTabItem": {
     "Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index 6b632e85feb..fb8f9b3c739 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.4.9-beta09</Version>
+    <Version>9.4.9</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor
index 16600bc649d..5b27a848824 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor
@@ -129,8 +129,11 @@ else
         <div role="tab" class="@GetClassString(item)">
             @RenderHeaderContent(item)
         </div>
-        <i class="tab-corner tab-corner-left"></i>
-        <i class="tab-corner tab-corner-right"></i>
+        @if (TabStyle == TabStyle.Chrome)
+        {
+            <i class="tab-corner tab-corner-left"></i>
+            <i class="tab-corner tab-corner-right"></i>
+        }
     </div>;
 
     RenderFragment RenderDefaultDisabledHeader(TabItem item) =>
@@ -143,8 +146,11 @@ else
         <a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
             @RenderHeaderContent(item)
         </a>
-        <i class="tab-corner tab-corner-left"></i>
-        <i class="tab-corner tab-corner-right"></i>
+        @if (TabStyle == TabStyle.Chrome)
+        {
+            <i class="tab-corner tab-corner-left"></i>
+            <i class="tab-corner tab-corner-right"></i>
+        }
     </div>;
 
     RenderFragment RenderDefaultHeader(TabItem item) =>
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
index 87617adb630..700f5d64ceb 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
@@ -45,6 +45,7 @@ public partial class Tab : IHandlerException
         .AddClass($"tabs-{Placement.ToDescriptionString()}", Placement == Placement.Top || Placement == Placement.Right || Placement == Placement.Bottom || Placement == Placement.Left)
         .AddClass("tabs-vertical", Placement == Placement.Left || Placement == Placement.Right)
         .AddClass("tabs-chrome", TabStyle == TabStyle.Chrome)
+        .AddClass("tabs-capsule", TabStyle == TabStyle.Capsule)
        .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
@@ -878,9 +879,9 @@ public async Task DragItemCallback(int originIndex, int currentIndex)
 
     private string? GetIdByTabItem(TabItem item) => (ShowFullScreen && item.ShowFullScreen) ? ComponentIdGenerator.Generate(item) : null;
 
-    private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeDisabledHeader(item) : RenderDefaultDisabledHeader(item);
+    private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultDisabledHeader(item) : RenderChromeDisabledHeader(item);
 
-    private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeHeader(item) : RenderDefaultHeader(item);
+    private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultHeader(item) : RenderChromeHeader(item);
 
     /// <summary>
     /// <inheritdoc/>
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
index 0eeeb16514c..172ccf2ac73 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
@@ -488,17 +488,64 @@
     }
 }
 
-.tabs-chrome {
+.tabs-chrome > .tabs-header,
+.tabs-capsule > .tabs-header {
     --bb-tabs-header-bg-color: var(--bs-border-color);
     --bb-tabs-item-hover-bg-color: rgba(var(--bs-body-color-rgb), 0.1);
     --bb-tabs-item-active-bg-color: var(--bs-body-bg);
     --bb-tabs-item-active-color: var(--bs-body-color);
     --bb-tabs-item-hover-color: var(--bs-body-color);
+    --bb-tabs-item-bg-color: rgba(var(--bs-body-color-rgb), 0.08);
+
+    .tabs-nav {
+        background-color: var(--bb-tabs-header-bg-color);
+    }
+
+    .tabs-item-fix {
+        border: none;
+    }
 
+    .tabs-item-wrap {
+        &:not(.active) {
+            .tabs-item:not(.disabled) .tabs-item-body {
+                &:hover {
+                    background-color: var(--bb-tabs-item-hover-bg-color);
+                }
+            }
+        }
+
+        .btn-fs {
+            padding: 0;
+        }
+
+        .tabs-item {
+            .tabs-item-body {
+                padding: 4px 10px;
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+                border-radius: 14.5px;
+
+                .tabs-item-text {
+                    padding: 0 .5rem;
+                }
+
+                .tabs-item-close {
+                    display: flex;
+                    position: unset;
+                    width: 21px;
+                    height: 21px;
+                    border-radius: 50%;
+                }
+            }
+        }
+    }
+}
+
+.tabs-chrome > .tabs-header {
     .tabs-item-wrap {
         overflow: hidden;
         position: relative;
-        background-color: var(--bb-tabs-header-bg-color);
         display: flex;
         align-items: flex-end;
         flex-shrink: 0;
@@ -517,44 +564,18 @@
             }
         }
 
-        &:not(.active) {
-            .tabs-item:not(.disabled) .tabs-item-body {
-                &:hover {
-                    border-radius: 20px;
-                    background-color: var(--bb-tabs-item-hover-bg-color);
-                }
-            }
-        }
-
         &:not(:first-child) {
             margin-left: -2rem;
         }
 
         .tabs-item {
-            background-color: var(--bb-tabs-header-bg-color);
             border: none !important;
             border-top-left-radius: 10px;
             border-top-right-radius: 10px;
             height: 36px !important;
 
             .tabs-item-body {
-                padding: 4px 10px;
-                display: flex;
-                align-items: center;
-                flex-wrap: nowrap;
                 margin-bottom: 4px;
-
-                .tabs-item-text {
-                    padding: 0 .5rem;
-                }
-
-                .tabs-item-close {
-                    display: flex;
-                    position: unset;
-                    width: 21px;
-                    height: 21px;
-                    border-radius: 50%;
-                }
             }
         }
 
@@ -592,14 +613,27 @@
                 border-bottom-left-radius: 50%;
             }
         }
+    }
+}
 
-        .btn-fs {
-            padding: 0;
+.tabs-capsule > .tabs-header {
+    .tabs-item-wrap {
+        margin-left: .5rem;
+
+        &.active {
+            .tabs-item {
+                .tabs-item-body {
+                    background-color: var(--bb-tabs-item-active-bg-color);
+                }
+            }
         }
-    }
 
-    > .tabs-header .tabs-item-fix {
-        background-color: var(--bb-tabs-header-bg-color);
-        border: none;
+        .tabs-item {
+            padding: 0;
+
+            .tabs-item-body {
+                background-color: var(--bb-tabs-item-bg-color);
+            }
+        }
     }
 }
diff --git a/src/BootstrapBlazor/Enums/TabStyle.cs b/src/BootstrapBlazor/Enums/TabStyle.cs
index 8b49a7bfe53..ff2286bd950 100644
--- a/src/BootstrapBlazor/Enums/TabStyle.cs
+++ b/src/BootstrapBlazor/Enums/TabStyle.cs
@@ -18,5 +18,10 @@ public enum TabStyle
     /// <summary>
     /// The Chrome style
     /// </summary>
-    Chrome
+    Chrome,
+
+    /// <summary>
+    /// The Capsule style
+    /// </summary>
+    Capsule
 }
diff --git a/test/UnitTest/Components/TabTest.cs b/test/UnitTest/Components/TabTest.cs
index 3f1783e941b..e259b50552e 100644
--- a/test/UnitTest/Components/TabTest.cs
+++ b/test/UnitTest/Components/TabTest.cs
@@ -470,6 +470,25 @@ public async Task TabStyle_Chrome_Ok()
         Assert.Equal(TabStyle.Default, cut.Instance.TabStyle);
     }
 
+    [Fact]
+    public void TabStyle_Capsule_Ok()
+    {
+        var cut = Context.RenderComponent<Tab>(pb =>
+        {
+            pb.Add(a => a.TabStyle, TabStyle.Capsule);
+            pb.AddChildContent<TabItem>(pb =>
+            {
+                pb.Add(a => a.Text, "Text1");
+                pb.Add(a => a.ChildContent, builder => builder.AddContent(0, "Test1"));
+                pb.Add(a => a.Icon, "fa fa-fa");
+            });
+        });
+        cut.Contains("tabs tabs-top tabs-capsule");
+        cut.Contains("tabs-item-wrap active");
+        cut.DoesNotContain("<i class=\"tab-corner tab-corner-left\"></i>");
+        cut.DoesNotContain("<i class=\"tab-corner tab-corner-right\"></i>");
+    }
+
     [Fact]
     public void MenuItem_Null()
     {