diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
new file mode 100644
index 00000000000..9581300459b
--- /dev/null
+++ b/core/src/components/input/input.md.outline.scss
@@ -0,0 +1,158 @@
+// Input Fill: Outline
+// ----------------------------------------------------------------
+
+:host(.input-fill-outline) {
+  --border-color: #{$background-color-step-300};
+  --border-radius: 4px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+}
+
+:host(.input-fill-outline.input-shape-round) {
+  --border-radius: 9999px;
+  --padding-start: 32px;
+  --padding-end: 32px;
+}
+
+/**
+ * The border should get thicker when
+ * the input is focused.
+ */
+:host(.input-fill-outline.has-focus) {
+  --border-width: 2px;
+}
+
+/**
+ * The bottom content should never have
+ * a border with the outline style.
+ */
+:host(.input-fill-outline) .input-bottom {
+  border-top: none;
+}
+
+/**
+ * Border should be
+ * slightly darker on hover.
+ */
+@media (any-hover: hover) {
+  :host(.input-fill-outline:hover) {
+    --border-color: #{$background-color-step-750};
+  }
+}
+
+/**
+ * Outline inputs do not have a bottom border.
+ * Instead, they have a border that wraps the
+ * input + label.
+ */
+:host(.input-fill-outline) .input-wrapper {
+  border-bottom: none;
+}
+
+:host(.input-fill-outline.input-label-placement-stacked) label,
+:host(.input-fill-outline.input-label-placement-floating) label {
+  @include transform-origin(center, top);
+}
+
+/**
+ * The label should appear on top of an outline
+ * container that overlaps it so it is always clickable.
+ */
+:host(.input-fill-outline) label,
+:host(.input-fill-outline) label {
+  position: relative;
+
+  z-index: 1;
+}
+
+/**
+ * This makes the label sit above the input.
+ */
+:host(.has-focus.input-fill-outline.input-label-placement-floating) label,
+:host(.has-value.input-fill-outline.input-label-placement-floating) label,
+:host(.input-fill-outline.input-label-placement-stacked) label,
+:host(.input-fill-outline.input-label-placement-stacked) label {
+  @include transform(translateY(-32%), scale(.75));
+  @include margin(0);
+}
+
+/**
+ * This ensures that the input does not
+ * overlap the floating label while still
+ * remaining visually centered.
+ */
+:host(.input-fill-outline.input-label-placement-stacked) input,
+:host(.input-fill-outline.input-label-placement-floating) input {
+  @include margin(6px, 0, 6px, 0);
+}
+
+// Input Fill: Outline Outline Container
+// ----------------------------------------------------------------
+
+:host(.input-fill-outline) .input-outline-container {
+  @include position(0, 0, 0, 0);
+
+  display: flex;
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+}
+
+:host(.input-fill-outline) .input-outline-start,
+:host(.input-fill-outline) .input-outline-end {
+  pointer-events: none;
+}
+
+/**
+ * By default, each piece of the container should have
+ * a top and bottom border. This gives the appearance
+ * of a unified container with a border.
+ */
+:host(.input-fill-outline) .input-outline-start,
+:host(.input-fill-outline) .input-outline-notch,
+:host(.input-fill-outline) .input-outline-end {
+  border-top: var(--border-width) var(--border-style) var(--border-color);
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+}
+
+:host(.input-fill-outline) .input-outline-start {
+  @include border-radius(var(--border-radius), 0px, 0px, var(--border-radius));
+  @include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
+
+  width: 12px;
+}
+
+/**
+ * When shape="round", the starting outline fragment
+ * should appear with a pill shape.
+ */
+:host(.input-fill-outline.input-shape-round) .input-outline-start {
+  @include border-radius(28px, 0px, 0px, 28px);
+  width: 28px;
+}
+
+:host(.input-fill-outline) .input-outline-end {
+  @include border(null, var(--border-width) var(--border-style) var(--border-color), null, null);
+  @include border-radius(0px, var(--border-radius), var(--border-radius), 0px);
+
+  /**
+   * The ending outline fragment
+   * should take up the remaining free space.
+   */
+  flex-grow: 1;
+}
+
+/**
+ * When the input either has focus or a value,
+ * there should be a "cut out" at the top for
+ * the floating/stacked label. We simulate this "cut out"
+ * by removing the top border from the notch fragment.
+ */
+:host(.has-focus.input-fill-outline.input-label-placement-floating) .input-outline-notch,
+:host(.has-value.input-fill-outline.input-label-placement-floating) .input-outline-notch,
+:host(.input-fill-outline.input-label-placement-stacked) .input-outline-notch,
+:host(.input-fill-outline.input-label-placement-stacked) .input-outline-notch {
+  border-top: none;
+}
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index d8dfa9fbf5a..b07c0bf9473 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -1,6 +1,7 @@
 @import "./input";
 @import "./input.md.vars";
-
+@import "./input.md.solid.scss";
+@import "./input.md.outline.scss";
 
 // Material Design Input
 // --------------------------------------------------
@@ -47,3 +48,10 @@
 .input-wrapper {
   min-height: 56px;
 }
+
+// Input Shape Rounded
+// ----------------------------------------------------------------
+
+:host(.input-shape-round) {
+  --border-radius: 16px;
+}
diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss
new file mode 100644
index 00000000000..280c835cea0
--- /dev/null
+++ b/core/src/components/input/input.md.solid.scss
@@ -0,0 +1,52 @@
+// Input Fill: Solid
+// ----------------------------------------------------------------
+
+:host(.input-fill-solid) {
+  --background: #{$background-color-step-50};
+  --border-color: #{$background-color-step-500};
+  --border-radius: 4px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+}
+
+/**
+ * The solid fill style has a border
+ * at the bottom of the input wrapper.
+ * As a result, the border on the "bottom
+ * content" is not needed.
+ */
+:host(.input-fill-solid) .input-wrapper {
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+}
+
+:host(.input-fill-solid) .input-bottom {
+  border-top: none;
+}
+
+/**
+ * Background and border should be
+ * slightly darker on hover.
+ */
+@media (any-hover: hover) {
+  :host(.input-fill-solid:hover) {
+    --background: #{$background-color-step-100};
+    --border-color: #{$background-color-step-750};
+  }
+}
+
+/**
+ * Background and border should be
+ * much darker on focus.
+ */
+:host(.input-fill-solid.has-focus) {
+  --background: #{$background-color-step-150};
+  --border-color: #{$background-color-step-750};
+}
+
+:host(.input-fill-solid) .input-wrapper {
+  /**
+   * Only the top left and top right borders should.
+   * have a radius when using a solid fill.
+   */
+  @include border-radius(var(--border-radius), var(--border-radius), 0px, 0px);
+}
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 619bffd9f3f..51fed885a2e 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -52,7 +52,6 @@
   /* stylelint-disable-next-line all */
   padding: 0 !important;
 
-  background: var(--background);
   color: var(--color);
 
   font-family: $font-family-base;
@@ -65,10 +64,13 @@
 
   flex: 1;
   align-items: center;
+
+  background: var(--background);
 }
 
 :host(.legacy-input) .native-input {
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include border-radius(var(--border-radius));
 }
 
 :host-context(ion-item:not(.item-label)) {
@@ -83,12 +85,13 @@
 // --------------------------------------------------
 
 .native-input {
-  @include border-radius(var(--border-radius));
   @include padding(0, 0, 0, 0);
   @include text-inherit();
 
   display: inline-block;
 
+  position: relative;
+
   flex: 1;
 
   width: 100%;
@@ -104,6 +107,17 @@
   box-sizing: border-box;
   appearance: none;
 
+  /**
+   * This ensures the input
+   * remains on top of any decoration
+   * that we render (particularly the
+   * outline border when fill="outline").
+   * If we did not do this then Axe would
+   * be unable to determine the color
+   * contrast of the input.
+   */
+  z-index: 1;
+
   &::placeholder {
     color: var(--placeholder-color);
 
@@ -220,23 +234,33 @@
 
 .input-wrapper {
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include border-radius(var(--border-radius));
 
   display: flex;
 
+  position: relative;
+
   flex-grow: 1;
 
   align-items: stretch;
 
   height: 100%;
 
-  background: inherit;
+  transition: background-color 15ms linear;
+
+  background: var(--background);
 }
 
 // Input Bottom Content
 // ----------------------------------------------------------------
 
 .input-bottom {
-  @include padding(5px, 0, 0, 0);
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the text input.
+   */
+  @include padding(5px, var(--padding-end), 0, var(--padding-start));
 
   display: flex;
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 6396fb58374..6ec349c6356 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -554,8 +554,54 @@ export class Input implements ComponentInterface {
     );
   }
 
+  private renderLabel() {
+    const { label } = this;
+    if (label === undefined) {
+      return;
+    }
+
+    return <label htmlFor={this.inputId}>{this.label}</label>;
+  }
+
+  /**
+   * Renders the border container
+   * when fill="outline".
+   */
+  private renderLabelContainer() {
+    const { labelPlacement } = this;
+    const hasOutlineFill = this.fill === 'outline';
+    const needsNotch = labelPlacement === 'floating' || labelPlacement === 'stacked';
+
+    if (hasOutlineFill) {
+      /**
+       * The outline fill has a special outline
+       * that appears around the input and the label.
+       * Certain label placements cause the
+       * label to translate up and create a "cut out"
+       * inside of that border. When this happens, we need
+       * to render the label inside of the input-outline-notch
+       * element. Otherwise, we can render it as a sibling
+       * of the outline container.
+       */
+      return [
+        <div class="input-outline-container">
+          <div class="input-outline-start"></div>
+          <div class="input-outline-notch">{needsNotch && this.renderLabel()}</div>
+          <div class="input-outline-end"></div>
+        </div>,
+        !needsNotch && this.renderLabel(),
+      ];
+    }
+
+    /**
+     * If not using the outline style,
+     * we can render just the label.
+     */
+    return this.renderLabel();
+  }
+
   private renderInput() {
-    const { disabled, label, readonly, inputId, labelPlacement } = this;
+    const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
 
@@ -566,11 +612,13 @@ export class Input implements ComponentInterface {
           [mode]: true,
           'has-value': this.hasValue(),
           'has-focus': this.hasFocus,
+          [`input-fill-${fill}`]: fill !== undefined,
+          [`input-shape-${shape}`]: shape !== undefined,
           [`input-label-placement-${labelPlacement}`]: true,
         })}
       >
         <div class="input-wrapper">
-          {label !== undefined && <label htmlFor={inputId}>{label}</label>}
+          {this.renderLabelContainer()}
           <input
             class="native-input"
             ref={(input) => (this.nativeInput = input)}
diff --git a/core/src/components/input/test/a11y/index.html b/core/src/components/input/test/a11y/index.html
index 13480465cd9..7ee00c06a23 100644
--- a/core/src/components/input/test/a11y/index.html
+++ b/core/src/components/input/test/a11y/index.html
@@ -15,10 +15,12 @@
     <main>
       <h1>Input - a11y</h1>
 
-      <ion-input label="my label"></ion-input>
-      <ion-input aria-label="my aria label"></ion-input>
-      <ion-input label="Email" label-placement="stacked" value="hi@ionic.io"></ion-input>
-      <ion-input label="Email" label-placement="floating"></ion-input>
+      <ion-input label="my label"></ion-input><br />
+      <ion-input aria-label="my aria label"></ion-input><br />
+      <ion-input label="Email" label-placement="stacked" value="hi@ionic.io"></ion-input><br />
+      <ion-input label="Email" label-placement="floating"></ion-input> <br />
+      <ion-input label="Email" label-placement="floating" fill="outline" value="hi@ionic.io"></ion-input> <br />
+      <ion-input label="Email" label-placement="floating" fill="solid" value="hi@ionic.io"></ion-input>
     </main>
   </body>
 </html>
diff --git a/core/src/components/input/test/fill/index.html b/core/src/components/input/test/fill/index.html
new file mode 100644
index 00000000000..dc2a13ef4af
--- /dev/null
+++ b/core/src/components/input/test/fill/index.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Fill</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <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>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Fill</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill</h2>
+            <ion-input class="no-fill" label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped No Fill</h2>
+            <ion-input shape="round" class="no-fill" label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped No Fill, Bottom Content</h2>
+            <ion-input
+              helper-text="Enter your email"
+              maxlength="20"
+              counter="true"
+              shape="round"
+              class="no-fill"
+              label="Email"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid</h2>
+            <ion-input fill="solid" label="Email" value="hi@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped Solid</h2>
+            <ion-input shape="round" fill="solid" label="Email" value="hi@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped Solid, Bottom Content</h2>
+            <ion-input
+              helper-text="Enter your email"
+              maxlength="20"
+              counter="true"
+              shape="round"
+              fill="solid"
+              label="Email"
+              value="hi@ionic.io"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid, Floating Label</h2>
+            <ion-input fill="solid" label="Email" label-placement="floating" value="hi@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid, Fixed Label</h2>
+            <ion-input fill="solid" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid, Stacked Label</h2>
+            <ion-input fill="solid" label="Email" label-placement="stacked" placeholder="example@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline</h2>
+            <ion-input fill="outline" label="Email" value="hi@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped Outline</h2>
+            <ion-input shape="round" fill="outline" label="Email" value="hi@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped Outline, Bottom Content</h2>
+            <ion-input
+              helper-text="Enter your email"
+              maxlength="20"
+              counter="true"
+              shape="round"
+              fill="outline"
+              label="Email"
+              value="hi@ionic.io"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline, Floating Label</h2>
+            <ion-input fill="outline" label="Email" label-placement="floating" value="hi@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline, Fixed Label</h2>
+            <ion-input fill="outline" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline, Stacked Label</h2>
+            <ion-input
+              fill="outline"
+              label="Email"
+              label-placement="stacked"
+              placeholder="example@ionic.io"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped Outline, Floating Label</h2>
+            <ion-input
+              shape="round"
+              fill="outline"
+              label="Email"
+              label-placement="floating"
+              value="hi@ionic.io"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped Outline, Fixed Label</h2>
+            <ion-input
+              shape="round"
+              fill="outline"
+              label="Email"
+              label-placement="fixed"
+              value="hi@ionic.io"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Shaped Outline, Stacked Label</h2>
+            <ion-input
+              shape="round"
+              fill="outline"
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+            ></ion-input>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/input/test/fill/input.e2e.ts b/core/src/components/input/test/fill/input.e2e.ts
new file mode 100644
index 00000000000..bb9c3e15f90
--- /dev/null
+++ b/core/src/components/input/test/fill/input.e2e.ts
@@ -0,0 +1,75 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('input: fill', () => {
+  test.beforeEach(({ skip }) => {
+    skip.mode('ios', 'Fill is only available in MD mode');
+  });
+
+  test.describe('input: fill solid', () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(`
+        <ion-input
+          fill="solid"
+          label="Email"
+          value="hi@ionic.io"
+          helper-text="Enter your email"
+          maxlength="20"
+          counter="true"
+        ></ion-input>
+      `);
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(`input-fill-solid-${page.getSnapshotSettings()}.png`);
+    });
+    test('should not have visual regressions with shaped solid', async ({ page }) => {
+      await page.setContent(`
+        <ion-input
+          shape="round"
+          fill="solid"
+          label="Email"
+          value="hi@ionic.io"
+          helper-text="Enter your email"
+          maxlength="20"
+          counter="true"
+        ></ion-input>
+      `);
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(`input-fill-shaped-solid-${page.getSnapshotSettings()}.png`);
+    });
+  });
+  test.describe('input: fill outline', () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(`
+        <ion-input
+          fill="outline"
+          label="Email"
+          value="hi@ionic.io"
+          helper-text="Enter your email"
+          maxlength="20"
+          counter="true"
+        ></ion-input>
+      `);
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(`input-fill-outline-${page.getSnapshotSettings()}.png`);
+    });
+    test('should not have visual regressions with shaped outline', async ({ page }) => {
+      await page.setContent(`
+        <ion-input
+          shape="round"
+          fill="outline"
+          label="Email"
+          value="hi@ionic.io"
+          helper-text="Enter your email"
+          maxlength="20"
+          counter="true"
+        ></ion-input>
+      `);
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(`input-fill-shaped-outline-${page.getSnapshotSettings()}.png`);
+    });
+  });
+});
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1820f55d173
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..af5260b4e4f
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e1c06207470
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..931886c5e0c
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..36a6c9fcb84
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ddcc63a272e
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..462aaa5b71f
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4b2eafe2e80
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..03a10bc21f4
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2b9b46568e9
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..934c84aa73e
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8e170348d0a
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e2cb83bac09
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c10b382b5bf
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5a5a08569c2
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0687074828d
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..88b7f9244c4
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..41338fc27de
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2e357751146
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d1c852ab17d
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..79d8e35800c
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..06cf4094970
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a3fafb715b2
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..573f3008474
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index afa5761d6fd..f72ebfe3eaa 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -209,7 +209,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   }
 
   componentDidLoad() {
-    const { el, counter, counterFormatter } = this;
+    const { el, counter, counterFormatter, fill, shape } = this;
     const hasHelperSlot = el.querySelector('[slot="helper"]') !== null;
     if (hasHelperSlot) {
       printIonWarning(
@@ -240,6 +240,20 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       );
     }
 
+    if (fill !== undefined) {
+      printIonWarning(
+        'The "fill" property has been deprecated in favor of using the "fill" property on ion-input or ion-textarea.',
+        el
+      );
+    }
+
+    if (shape !== undefined) {
+      printIonWarning(
+        'The "shape" property has been deprecated in favor of using the "shape" property on ion-input or ion-textarea.',
+        el
+      );
+    }
+
     raf(() => {
       this.inheritedAriaAttributes = inheritAttributes(el, ['aria-label']);
       this.setMultipleInputs();