Bootstrap: [BUG] Form input with input-group-prepend and valid-feedback/invalid-feedback lose border radius

[BattlefieldDuck]

The border-radius is not rounded when form with input-group-prepend and (valid-feedback or invalid-feedback) lose border-radius.

Normally with input-group-prepend only:

Normally with invalid-feedback only:

But with both input-group-prepend and invalid-feedback lose border-radius on the right side:

Code that regenerate the border bug:

<div class="col-md-4 mb-3">
  <label for="validationCustomUsername">Username</label>
  <div class="input-group">
    <div class="input-group-append">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
    </div>
    <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
    <div class="valid-feedback">
      Please choose a username.
    </div>
  </div>
</div>

You can see the bug in Bootstrap document too
https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

[midzer]

This happens because of

<div class="invalid-feedback">
  Please choose a username.
</div>

as last child inside .input-group

[BattlefieldDuck]

Oh I see! I understand now.

[alexdarahan]

Sorry... But I personally didn't get... What's workaround for it?
I mean if I want a div with a 'invalid-feedback' to be present in order to show that this error belongs to this field..
Any decision for this? It should be outside the 'input-group' ?

[BattlefieldDuck]

The solution of this is add a .rounded-right in input.
See: https://tatlead.com/bootstrap/BUG-FormInputBorderRadius.html

[frouo]

I reopen a similar issue since the bug remains in bootstrap 4.4 https://github.com/twbs/bootstrap/issues/30116