Incorrect borders with .list-group-flush.list-group-horizontal

[fulldecent]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When using .list-group-flush and .list-group-horizontal on the same list group you get:

But was expecting:

Documentation seems to say that this is possible:

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

---

I have seen another issue about putting a list group IN a list group. But that is not what is being reported here.

---

Workaround (how I made the second screenshot) is to add .border-0 on each .list-group-item

Reduced test cases

    <!-- a card with a link list group -->
    <div class="card" style="width: 18rem;">
      <div class="card-header">
        Featured
      </div>
      <div class="list-group list-group-flush list-group-horizontal">
        <a href="#" class="list-group-item list-group-item-action">Certificates</a>
        <a href="#" class="list-group-item list-group-item-action">Products</a>
        <a href="#" class="list-group-item list-group-item-action">AHA</a>
      </div>
    </div>

    <hr>

    <!-- a card with a link list group -->
    <div class="card" style="width: 18rem;">
      <div class="card-header">
        Featured
      </div>
      <div class="list-group list-group-flush list-group-horizontal">
        <a href="#" class="list-group-item list-group-item-action border-0">Certificates</a>
        <a href="#" class="list-group-item list-group-item-action border-0">Products</a>
        <a href="#" class="list-group-item list-group-item-action border-0">AHA</a>
      </div>
    </div>

Edit: CodePen created by @julien-deramond: https://codepen.io/julien-deramond/pen/rNoWJxg

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

5.3.1

[julien-deramond]

Thanks for reporting this issue @fulldecent.
I can see that even without integrating the horizontal flush list group into the card, there's an issue with borders:

<div class="list-group list-group-flush list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>

Here's a CodePen showing the issue initially reported and the one I saw while testing it: https://codepen.io/julien-deramond/pen/rNoWJxg

[fulldecent]

Aha! Thank you, good minimizing!

[WOLFRIEND]

@julien-deramond @fulldecent

Hey, guys.
I think I've found a solution to fix it and created a pull request: #39513.
For me, it works well, I checked separately only with a group list and inside a card component as well. I relied on how a vertical group list works. A vertical list, having the .list-group-flush class, has only bottom borders. Accordingly, a horizontal list with this class will have only the right-side frames.

@julien-deramond Could, you, check, please?
Thanks.

[WOLFRIEND]

I messed a bit with the commits, so if necessary, I can create a new pull request where I can clean everything up.

[julien-deramond]

@WOLFRIEND I think that's OK, we change the message commit in the end and squash everything. If the final changes in the PR are OK, there's no need to clean it up.