diff --git a/core/api.txt b/core/api.txt
index 7bdebea2a79..7a6248f9f2e 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -2177,8 +2177,10 @@ ion-tab,method,setActive,setActive() => Promise<void>
 
 ion-tab-bar,shadow
 ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-tab-bar,prop,expand,"compact" | "full",'full',false,false
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
+ion-tab-bar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-tab-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab-bar,prop,translucent,boolean,false,false,false
 ion-tab-bar,css-prop,--background,ionic
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index f0d3a0636fd..f8c88b745bd 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3411,6 +3411,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"compact"` to display a width based on the items inside the tab bar. This value will only work for the `ionic` theme.  Set to `"full"` to display a full width tab bar.  Defaults to `"full"`.
+         */
+        "expand": 'compact' | 'full';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -3419,6 +3423,10 @@ export namespace Components {
           * The selected tab component
          */
         "selectedTab"?: string;
+        /**
+          * Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8765,6 +8773,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"compact"` to display a width based on the items inside the tab bar. This value will only work for the `ionic` theme.  Set to `"full"` to display a full width tab bar.  Defaults to `"full"`.
+         */
+        "expand"?: 'compact' | 'full';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -8775,6 +8787,10 @@ declare namespace LocalJSX {
           * The selected tab component
          */
         "selectedTab"?: string;
+        /**
+          * Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
diff --git a/core/src/components/tab-bar/tab-bar.common.scss b/core/src/components/tab-bar/tab-bar.common.scss
index b78f8014dab..79bec564b43 100644
--- a/core/src/components/tab-bar/tab-bar.common.scss
+++ b/core/src/components/tab-bar/tab-bar.common.scss
@@ -9,14 +9,6 @@
   align-items: center;
   justify-content: center;
 
-  width: auto;
-
-  /* stylelint-disable */
-  padding-right: var(--ion-safe-area-right);
-  padding-bottom: var(--ion-safe-area-bottom, 0);
-  padding-left: var(--ion-safe-area-left);
-  /* stylelint-enable */
-
   border-top: var(--border);
 
   background: var(--background);
@@ -24,7 +16,6 @@
 
   text-align: center;
 
-  contain: strict;
   user-select: none;
 
   /* stylelint-disable-next-line declaration-no-important */
@@ -41,9 +32,6 @@
 }
 
 :host([slot="top"]) {
-  padding-top: var(--ion-safe-area-top, 0);
-  padding-bottom: 0;
-
   border-top: 0;
   border-bottom: var(--border);
 }
@@ -52,3 +40,25 @@
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }
+
+// Tab Bar Expand
+// --------------------------------------------------
+
+/* Full */
+:host(.tab-bar-full) {
+  width: auto;
+
+  contain: strict;
+
+  /* stylelint-disable */
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+
+  padding-right: var(--ion-safe-area-right);
+  padding-left: var(--ion-safe-area-left);
+  /* stylelint-enable */
+}
+
+:host([slot="top"].tab-bar-full) {
+  padding-top: var(--ion-safe-area-top, 0);
+  padding-bottom: 0;
+}
diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss
index 0b7ab0cfce9..2e4cf4bad49 100644
--- a/core/src/components/tab-bar/tab-bar.ionic.scss
+++ b/core/src/components/tab-bar/tab-bar.ionic.scss
@@ -19,16 +19,68 @@
    */
   min-height: calc(globals.$ionic-scale-1400 - calc(globals.$ionic-space-100 * 2));
 
-  padding-top: calc(globals.$ionic-space-100 + var(--ion-safe-area-top, 0));
-  padding-bottom: calc(globals.$ionic-space-100 + var(--ion-safe-area-bottom, 0));
+  gap: globals.$ionic-space-300;
+
+  // TODO(ROU-10853): replace this value with a layer token
+  z-index: 10;
+}
+
+// Tab Bar Expand
+// --------------------------------------------------
 
+/* Full */
+:host(.tab-bar-full) {
   /* stylelint-disable */
+  padding-top: globals.$ionic-space-100;
+  padding-bottom: calc(globals.$ionic-space-100 + var(--ion-safe-area-bottom, 0));
+
   padding-right: calc(globals.$ionic-space-400 + var(--ion-safe-area-right, 0));
   padding-left: calc(globals.$ionic-space-400 + var(--ion-safe-area-left, 0));
   /* stylelint-enable */
+}
 
-  gap: globals.$ionic-space-300;
+:host([slot="top"].tab-bar-full) {
+  padding-top: calc(globals.$ionic-space-100 + var(--ion-safe-area-top, 0));
+  padding-bottom: globals.$ionic-space-100;
+}
 
-  // TODO(ROU-10853): replace this value with a layer token
-  z-index: 10;
+/* Compact */
+:host(.tab-bar-compact) {
+  @include globals.padding(globals.$ionic-space-100, globals.$ionic-space-400);
+
+  position: absolute;
+
+  align-self: center;
+
+  width: fit-content;
+
+  box-shadow: #{globals.$ionic-elevation-200};
+
+  contain: content;
+}
+
+:host([slot="top"].tab-bar-compact) {
+  top: calc(globals.$ionic-space-100 + var(--ion-safe-area-top, 0));
+}
+
+:host([slot="bottom"].tab-bar-compact) {
+  bottom: calc(globals.$ionic-space-100 + var(--ion-safe-area-bottom, 0));
+}
+
+// Tab Bar Shapes
+// --------------------------------------------------
+
+/* Soft */
+:host(.tab-bar-soft) {
+  @include globals.border-radius(globals.$ionic-border-radius-400);
+}
+
+/* Round */
+:host(.tab-bar-round) {
+  @include globals.border-radius(globals.$ionic-border-radius-full);
+}
+
+/* Rectangular */
+:host(.tab-bar-rectangular) {
+  @include globals.border-radius(globals.$ionic-border-radius-0);
 }
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index e0888b800c8..02bf05082d8 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -56,6 +56,26 @@ export class TabBar implements ComponentInterface {
    */
   @Prop() translucent = false;
 
+  /**
+   * Set to `"compact"` to display a width based on the items
+   * inside the tab bar. This value will only work for the
+   * `ionic` theme.
+   *
+   * Set to `"full"` to display a full width tab bar.
+   *
+   * Defaults to `"full"`.
+   */
+  @Prop() expand: 'compact' | 'full' = 'full';
+
+  /**
+   * Set to `"soft"` for a tab bar with slightly rounded corners,
+   * `"round"` for a tab bar with fully rounded corners, or
+   * `"rectangular"` for a tab bar without rounded corners.
+   *
+   * Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+   */
+  @Prop() shape?: 'soft' | 'round' | 'rectangular';
+
   /** @internal */
   @Event() ionTabBarChanged!: EventEmitter<TabBarChangedEventDetail>;
 
@@ -96,9 +116,26 @@ export class TabBar implements ComponentInterface {
     this.ionTabBarLoaded.emit();
   }
 
+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    // TODO(ROU-11234): Remove theme check when shapes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (shape === undefined) {
+      return 'round';
+    }
+
+    return shape;
+  }
+
   render() {
-    const { color, translucent, keyboardVisible } = this;
+    const { color, translucent, keyboardVisible, expand } = this;
     const theme = getIonTheme(this);
+    const shape = this.getShape();
     const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
 
     return (
@@ -109,6 +146,8 @@ export class TabBar implements ComponentInterface {
           [theme]: true,
           'tab-bar-translucent': translucent,
           'tab-bar-hidden': shouldHide,
+          [`tab-bar-${expand}`]: true,
+          [`tab-bar-${shape}`]: shape !== undefined,
         })}
       >
         <slot></slot>
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
index 86c26e58d15..c6db55b7a3e 100644
--- a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
+++ b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
@@ -9,6 +9,12 @@ configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, conf
     test('should not have visual regressions', async ({ page }) => {
       await page.setContent(
         `
+        <style>
+          :root {
+            background: #ccc7c7;
+          }
+        </style>
+
         <ion-tab-bar selected-tab="2">
           <ion-tab-button tab="1">
             <ion-icon name="home-outline"></ion-icon>
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 73b0c9fb7b6..36cff63981c 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a3dd154ea0c..3b522db74ea 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9058929292a..bce88a0be1d 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png
index d01f395966a..54aff9fc643 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
index d622c0a7069..3e4a2a582ff 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png
index 8cd7b35ed37..2555a9e3b7c 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png
index 225584c5412..543ce3760f3 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png
index f0ec1b41c6c..e617a77c2e6 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/expand/index.html b/core/src/components/tab-bar/test/expand/index.html
new file mode 100644
index 00000000000..af18c3b168a
--- /dev/null
+++ b/core/src/components/tab-bar/test/expand/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tab Bar - Expand</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
+    <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <h2>Default</h2>
+        <ion-tab-bar>
+          <ion-tab-button tab="1">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+
+        <h2>Full</h2>
+        <ion-tab-bar expand="full">
+          <ion-tab-button tab="1">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+
+        <h2>Compact</h2>
+        <ion-tab-bar expand="compact">
+          <ion-tab-button tab="1">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-content>
+    </ion-app>
+
+    <style>
+      ion-content {
+        --background: #f6f6f6;
+      }
+    </style>
+  </body>
+</html>
diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts
new file mode 100644
index 00000000000..39cfaf328d3
--- /dev/null
+++ b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts
@@ -0,0 +1,45 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior only applies to the `ionic` theme.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-bar: expand'), () => {
+    test.describe(title('compact'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              background: #ccc7c7;
+            }
+          </style>
+
+          <ion-tab-bar expand="compact">
+            <ion-tab-button tab="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-expand-compact`));
+      });
+    });
+  });
+});
diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d5e23fa2944
Binary files /dev/null and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d4b0894aa84
Binary files /dev/null and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b7b4ca64970
Binary files /dev/null and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/index.html b/core/src/components/tab-bar/test/shape/index.html
new file mode 100644
index 00000000000..8bf2e5db15a
--- /dev/null
+++ b/core/src/components/tab-bar/test/shape/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tab Bar - Shape</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
+    <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <h2>Default</h2>
+        <ion-tab-bar>
+          <ion-tab-button tab="1">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+
+        <h2>Soft</h2>
+        <ion-tab-bar shape="soft">
+          <ion-tab-button tab="1">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+
+        <h2>Round</h2>
+        <ion-tab-bar shape="round">
+          <ion-tab-button tab="1">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+
+        <h2>Rectangular</h2>
+        <ion-tab-bar shape="rectangular">
+          <ion-tab-button tab="1">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-content>
+    </ion-app>
+
+    <style>
+      ion-content {
+        --background: #f6f6f6;
+      }
+
+      .ionic ion-tab-bar {
+        position: static;
+      }
+    </style>
+  </body>
+</html>
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts
new file mode 100644
index 00000000000..823e902dfe8
--- /dev/null
+++ b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts
@@ -0,0 +1,118 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior only applies to the `ionic` theme.
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-bar: shape'), () => {
+    test.describe(title('soft'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              background: #ccc7c7;
+            }
+          </style>
+
+          <ion-tab-bar shape="soft">
+            <ion-tab-button tab="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-shape-soft`));
+      });
+    });
+
+    test.describe(title('round'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              background: #ccc7c7;
+            }
+          </style>
+
+          <ion-tab-bar shape="round">
+            <ion-tab-button tab="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-shape-round`));
+      });
+    });
+
+    test.describe(title('rectangular'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              background: #ccc7c7;
+            }
+          </style>
+
+          <ion-tab-bar shape="rectangular">
+            <ion-tab-button tab="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-shape-rectangular`));
+      });
+    });
+  });
+});
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..218fd230fd5
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..818306b5a81
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..329d0877413
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..232b6b237a4
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..de720dab4ad
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..416c9aa77c5
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d8d447c2be1
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..40189743272
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4a27af41572
Binary files /dev/null and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 6f366b0487b..a6377d16c03 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -2178,14 +2178,14 @@ export declare interface IonTab extends Components.IonTab {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent']
+  inputs: ['color', 'expand', 'mode', 'selectedTab', 'shape', 'theme', 'translucent']
 })
 @Component({
   selector: 'ion-tab-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent'],
+  inputs: ['color', 'expand', 'mode', 'selectedTab', 'shape', 'theme', 'translucent'],
 })
 export class IonTabBar {
   protected el: HTMLElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index d5361628388..10223039d16 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1972,14 +1972,14 @@ export declare interface IonTab extends Components.IonTab {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonTabBar,
-  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent']
+  inputs: ['color', 'expand', 'mode', 'selectedTab', 'shape', 'theme', 'translucent']
 })
 @Component({
   selector: 'ion-tab-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent'],
+  inputs: ['color', 'expand', 'mode', 'selectedTab', 'shape', 'theme', 'translucent'],
   standalone: true
 })
 export class IonTabBar {