title: input-group border doubling up in the middle
body: <p>I am using bootstrap 4 input-group as shown below. I have changed the <code>border-width</code> to <code>10px</code>. It seems like the border width in the middle is doubling up:</p>
  
  <p><a href="https://i.stack.imgur.com/sCzzO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sCzzO.jpg" alt="enter image description here"></a></p>
  
  <p>Is it possible to make the middle border as wide as the side borders?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.input-text {
    border-width: 10px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="centered-query"&gt;
      &lt;div class="row justify-content-center"&gt;
          &lt;div class="col-lg-9 col-12"&gt;
              &lt;div class="input-group"&gt;
                  &lt;input type="text" class="form-control input-text"&gt;
                  &lt;input type="text" class="form-control input-text"&gt;
                  &lt;div class="input-group-append"&gt;
                      &lt;button type="submit" class="btn"&gt;Go&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>