Border effect outside the element

Light gray outline gradient outside the gray border

Hello I want to set the light gray outline outside gray border line just like in the following image.either there is a border position set or blur effect the input text. Please tell me how can I fix this issue? I am doing all of this in css.

.container {
  background-color: aquamarine;
  width: 100%;
  height: auto;
}

input[type="text"],
textarea,
textarea.form-control {
  background-color: #efeeef;
  width: 396px;
  height: 48px;
  border-radius: 4px;
  border: 3px solid #cecece;
}

textarea.form-control {
  line-height: 50%;
  font-size: 16px;
  color: red;
  font-weight: 500;
}
<div class="container">
  <!--Form element-->
  <form>
    <fieldset>
      <input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email">
    </fieldset>
  </form>

</div>

When I am using shade effects it is also useless.Is there any way to set the position of the border in this input area.

Answer

Borders cannot be set to blur (at least directly). If you are using some sort of CSS library, say Bootstrap then it may be adding box-shadow to the input elements.

Setting the box-shadow: none; on the required input should solve the problem.