title: Box Shadow only in the middle(Left-right) horizontaly
body: <p><a href="https://i.stack.imgur.com/Kepcp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kepcp.jpg" alt="Box shadow should be in the middle and not in the corners(left,right sides)."></a></p>
  
  <p>I am trying to achieve box shadow similar in the image. I have tried different solutions but shadow keeps appearing on the entire box than only in the middle. </p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div id="login" class="animate form"&gt;
      &lt;div class="login-header"&gt;&lt;h2&gt;Sign In to the world of &lt;span&gt;"I want Ride!"&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;
      &lt;form  action="form.php" autocomplete="on"&gt;
          &lt;h1&gt;Log in&lt;/h1&gt;
          &lt;p&gt; 
             &lt;label for="username" class="uname" data-icon="u" &gt;&lt;/label&gt;
             &lt;input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/&gt;
          &lt;/p&gt;
          &lt;p&gt; 
             &lt;label for="password" class="youpasswd" data-icon="p"&gt;&lt;/label&gt;
             &lt;input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /&gt; 
          &lt;/p&gt;
          &lt;p class="forgot-pass"&gt;
             &lt;a href="#" class="to_register"&gt;Forgot your Password?&lt;/a&gt;
          &lt;/p&gt;
          &lt;p class="keeplogin"&gt; 
             &lt;input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /&gt; 
             &lt;label for="loginkeeping"&gt;Keep me logged in&lt;/label&gt;
          &lt;/p&gt;
          &lt;p class="login button"&gt; 
             &lt;input type="submit" value="Login" /&gt; 
          &lt;/p&gt;
          &lt;p class="change_link"&gt;
             Not a member yet ?
             &lt;a href="#" class="to_register"&gt;Sign Up Now&lt;/a&gt;
          &lt;/p&gt;
      &lt;/form&gt;
      &lt;div class="close-btn"&gt;&lt;img src="images/close.png" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#login {
      width: 100%;
      margin: 0 0 35px 0;
      background: rgb(247, 247, 247);
      border: 1px solid rgba(147, 184, 189, 0.8);
      -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
      -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
      box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
      -webkit-box-shadow: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  }
  </code></pre>