Fix border on input group elements and custom form inputs

c3e4cbdf changed the border of input elements to be translucent. This commit makes
input group elements and custom form inputs follow the same pattern.

scss/_custom-forms.scss

@@ -139,6 +139,7 @@
   color: $custom-select-color;
   vertical-align: middle;
   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
+  background-clip: padding-box;
   background-size: $custom-select-bg-size;
   border: $custom-select-border-width solid $custom-select-border-color;
   @if $enable-rounded {
@@ -215,11 +216,13 @@
   z-index: 5;
   height: $custom-file-height;
   padding: $custom-file-padding-x $custom-file-padding-y;
+  overflow: hidden;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
   pointer-events: none;
   user-select: none;
   background-color: $custom-file-bg;
+  background-clip: padding-box;
   border: $custom-file-border-width solid $custom-file-border-color;
   @include border-radius($custom-file-border-radius);
   @include box-shadow($custom-file-box-shadow);
@@ -232,9 +235,8 @@
 
   &::before {
     position: absolute;
-    top: -$custom-file-border-width;
-    right: -$custom-file-border-width;
-    bottom: -$custom-file-border-width;
+    top: 0;
+    right: 0;
     z-index: 6;
     display: block;
     height: $custom-file-height;
@@ -242,8 +244,7 @@
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
     background-color: $custom-file-button-bg;
-    border: $custom-file-border-width solid $custom-file-border-color;
-    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
+    border-left: $custom-file-border-width solid $custom-file-border-color;
   }
 
   @each $lang, $text in map-get($custom-file-text, button-label) {

scss/_input-group.scss

@@ -74,6 +74,7 @@
   color: $input-color;
   text-align: center;
   background-color: $input-group-addon-bg;
+  background-clip: padding-box;
   border: $input-btn-border-width solid $input-group-addon-border-color;
   @include border-radius($input-border-radius);
 
@@ -144,6 +145,8 @@
   // element above the siblings.
   > .btn {
     position: relative;
+    background-clip: padding-box;
+    border: $input-btn-border-width solid $input-group-btn-border-color;
 
     + .btn {
       margin-left: (-$input-btn-border-width);

scss/_variables.scss

@@ -400,6 +400,7 @@ $form-group-margin-bottom:       1rem !default;
 
 $input-group-addon-bg:           $gray-200 !default;
 $input-group-addon-border-color: $input-border-color !default;
+$input-group-btn-border-color:   $input-border-color !default;
 
 $custom-control-gutter:   1.5rem !default;
 $custom-control-spacer-y: .25rem !default;