diff --git a/docs/components/input.md b/docs/components/input.md
index 90f6dab8..3c55416b 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -18,5 +18,11 @@
     <template #before>before</template>
     <template #after>after</template>
   </EInput>
+  <EInput>
+    <template #after>after</template>
+  </EInput>
+  <EInput>
+    <template #before>after</template>
+  </EInput>
 </template>
 ```
diff --git a/src/input/index.css b/src/input/index.css
index c80945c7..b08e9cba 100644
--- a/src/input/index.css
+++ b/src/input/index.css
@@ -1,10 +1,16 @@
 .e-input {
   @apply inline-flex w-full items-stretch rounded-md  text-sm shadow-sm;
   &__input {
-    @apply flex w-full flex-1 items-center rounded-md border border-solid border-gray-300 px-3;
+    @apply flex w-full flex-1 items-center border border-solid border-gray-300 px-3 transition-all;
     &.is-focused {
       @apply z-10 border-indigo-500 ring-1 ring-indigo-500;
     }
+    &:last-child {
+      @apply rounded-r-md;
+    }
+    &:first-child {
+      @apply rounded-l-md;
+    }
   }
   &__prefix {
     @apply flex-initial pr-2;
@@ -23,9 +29,6 @@
   }
   &__before {
     @apply rounded-l-md border-r-0;
-    + .e-input__input {
-      @apply rounded-l-none;
-    }
   }
   &__after {
     @apply rounded-r-md border-l-0;