The element with .dropdown-toggle class will appear mistake border-radius on right side.

[Ray-Aries]

The element with .dropdown-toggle class will appear mistake border-radius on right side when it in the element with .input-group-append class. (except .dropdown-toggle class element is last child element.)
Note.
This issue has been confirmed on chrome( 80.0.3987.132 x64), firefox(75.0 x64）and Edge(81.0.416.68 x64).
This issue happen on Bootstrap ver 4.4.1, ver 4.3.1, ver 4.2.1 & 4.0.0.

BS4InputGroups.txt

[XhmikosR]

What's your display's DPI?

Also, please provide a codepen.

[Ray-Aries]

Hi, XhmikosR

What's your display's DPI?
My notebook resolution is 1366x768 / 96 dpi.
I have been confirm resize browser window that still found this issue.
This issue on my mobile phone(resolution 1520x720 /269 ppi density) - using chrome v80.0.3987.132 happened also.
Also, please provide a codepen.
I have provide the complete source code as BS4InputGroups.txt in last comment.

[Ray-Aries]

Hi, XhmikosR
I have short term solution that is add attribute style="border-top-right-radius: 0;border-bottom-right-radius: 0;" on element with .dropdown-toggle class inside the container element with .input-group-append class.

Base on short term solution, check original file bootstrap.css that found root couse is original style code have problem.

I have try modify the code as a css copy file.
use below code replace original code on same line that solve this issue.
/* original css code line content /
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
/ End of original css code line content /
/ update css code line content /
.input-group > .input-group-append:last-child > .btn:not(:last-child),
/ End of update css code line content */

I hope this solution can be imported on next Bootstrap 4 version, thanks.

[XhmikosR]

@twbs/css-review

[ysds]

See #28150

[Ray-Aries]

Hi @ysds thanks for your commend,
but this issue happened on bootstrap ver 4.5.0 still.
the issue ＃28150 solution will let the code become complex(at last in my test case).
test case sample https://codepen.io/ray-aries/pen/mdeKBYV
I have read your commend in issue ＃28150. and check the element style code with chrome's DevTools and original bootstrap.css(both ver 4.5.0 and 4.3.1) file.
I made sure .dropdown class has position: relative (as your commend in ＃28150),
but in test case(both ＃28150 and this ) with chrome's DevTools can't find position: relative on issue happended element, due to test case used class is .dropdown-toggle (not .dropdown) and also not is child element inside .dropdown class element.
By the way, root couse style code can find in souce file /scss/_input-group.scss.
I'm sorry to bother you.
just make a note in here.