Different way are used to control overlap border of `input-group-addon` between` input-group-btn`

[ysds]

Regarding overlapping of borders of a grouped element, @mdo commented in #24453 that it is not good way to control the border color. As an alternative, we can use border-width: 0 or negative margin.

In input group, .input-group-addon uses border width to 0, and input-group-btn uses negative margin. I think we should use a same way (negative margin), since .input-group-addon and input-group-btn are similar in principle.

bootstrap/scss/_input-group.scss

Lines 145 to 151 in 9de141f

	.form-control,
	.custom-select,
	.custom-file {
	+ .input-group-addon:not(:first-child) {
	border-left: 0;
	}
	}

bootstrap/scss/_input-group.scss

Lines 165 to 172 in 9de141f

	// Negative margin for spacing, position for bringing hovered/focused/actived
	// element above the siblings.
	> .btn {
	position: relative;
	+ .btn {
	margin-left: (-$input-border-width);
	}

[ysds]

And, RIGHT SIDE .input-group-btn > .btn + .btn has double border;

https://jsfiddle.net/35n8yt2x/

You can reproduce this issue on the docs:
http://getbootstrap.com/docs/4.0/components/input-group/#segmented-buttons

.btn-secondary to .btn-outline-secondary: